javascript - 多个处理程序附加到一个事件 : How to detach only one?

Question

在我正在处理的这个模块中，我有一个监听窗口中的“调整大小”事件的监听器。每次运行模块时，我都需要检查是否已经有一个监听器注册到该事件并将其分离，以避免不必要的行为、内存泄漏等。

到目前为止一切顺利，但是，在我们正在处理的这个应用程序中，有可能一些处理程序已经附加到“调整大小”事件，我无法调用 $(window).off('resize ')，因为这会刷新之前由其他插件或模块注册的所有其他事件处理程序。

话虽如此，我想知道是否有一种方法可以识别我的处理程序并仅分离我自己注册的内容。如何为我的事件处理程序设置标识符以便在 .off() 函数中引用？

任何帮助都会很好。

Answer 1

这里有 2 个不同的建议。您可以为事件指定命名空间，也可以在绑定(bind)时传递非匿名函数。

使用命名空间的例子:

$(window).on('resize.event1', function(){});
$(window).on('resize.event2', function(){});

//Only turn off event 2
$(window).off('resize.event2');

jQuery 允许您识别您的事件。这种行为称为命名空间。当前事件和事件名称必须用点分隔。在这种情况下，我绑定(bind)了 2 个调整大小事件(点的左侧)，一个名为 event1，另一个名为 event2。

通过识别事件，当一个对象有多个相同的事件时，您可以移除(或触发)单个事件。

$(window).trigger('resize'); //Trigger both;
$(window).trigger('resize.event2'); //Trigger event2;

使用命名函数的例子:

$(window).on('resize', function1);
$(window).on('resize', function2);

//Only turn off event 2
$(window).off('resize', function2);

关联一个非匿名函数允许您在传递的函数与当前事件函数匹配时删除事件。因为 function2 === function2，只有第二个函数会被移除，因为 function1 !== function2!