jQuery将所有事件听众坚持在元素上，以便将来设置

Question

使用jQuery我需要：

1. 坚持添加到元素的所有事件处理程序的列表
2. 将它们全部删除几秒钟，
3. 将事物返回初始状态（重新分配同一事件处理程序）

我发现获得了具有（某些jQuery内部机制）的当前听众列表：

var eventsSubmitBtn = $._data(submitButton[0], "events");

然后我可以用

删除所有事件听众

 submitButton.off();

但最后一个词干似乎无法正常工作

 setTimeout(function () {
      $._data(submitButton[0], "events", eventsSubmitBtn);
    }, 5000);

eventsSubmitBtn是一个空数组。

这是应该在初始设置的情况下完成的，我需要对这些对象进行深层克隆之类的东西，还是可以使用$._data？

来完成。

N.B。我有可能在所有其他系统JS代码之后添加我的CISTOM代码，因此我无法将分配给$.fn.on的代码在任何内容之前。我编写的代码将在启动上运行最后一个事件，并在我的脚本运行之前附有其他事件侦听器。

Answer 1

当您获得$._data()返回的对象的引用时，对该对象的任何更改都不会被注意到，即在调用.off()之后，该对象将更改以反映没有存在处理程序再附加了。

您可以通过取浅对象的浅副本来解决此问题（例如，使用Object.assign）。

，但这并不是真正的推荐方法。根据jQuery博客的说法，" jQuery._data(element, "events") ...是一种内部数据结构，不应修改并且不应修改。" 。当您在恢复处理程序时对其进行修改时，这不能被视为最佳实践。但是，即使仅阅读它也应仅用于调试，而不是生产代码。

在您的活动处理代码中放置条件会更加谨慎：

var ignoreEventsFor = $(); // empty list
$("#button").on('click', function () {
    if (ignoreEventsFor.is(this)) return;
    // ...
});

然后，在需要时，将ignoreEventsFor设置为您要忽略事件的元素。当您想恢复正常时，请再次将其设置为$()。

现在将其添加到所有活动处理程序中可能会成为负担。如果您坚持使用on()用于附加事件处理程序，则可以扩展$.fn.on，以便将此逻辑添加到您传递的处理程序中。

以下演示具有一个按钮，可以通过更改背景颜色来响应点击。使用复选框您可以禁用此操作：

/* Place this part immediately after jQuery is loaded, but before any 
   other library is included 
*/
var ignoreEventsFor = $(), // empty list
    originalOn = $.fn.on;
$.fn.on = function (...args) {
    var f = args[args.length-1];
    if (typeof f === 'function') {
        args[args.length-1] = function (...args2) {
            if (ignoreEventsFor.is(this)) return;
            f.call(this, ...args2);
        };
    }
    originalOn.call(this, ...args);
}
/* This next part belongs to the demo, and can be placed anywhere */
$(function () {
    $("#colorButton").on('click', function () {
        // Just some handler that changes the background
        var random = ('00' + (Math.random() * 16*16*16).toString(16)).substr(-3);
        $('body').css({ backgroundColor: "#" + random });
    });
    $("#toggler").on('change', function () {
        // Toggle the further handling of events for the color button:
        ignoreEventsFor = $(this).is(':checked') ? $("#colorButton") : $();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="colorButton">Change color</button><br>
<input type="checkbox" id="toggler">Disable events

注意：上面的代码使用ES6张开/rest语法：如果您需要IE的支持，则必须使用arguments变量，apply，...等。