Javascript 覆盖事件

Question

我有几个带有点击事件的元素:

$$('.set_main').invoke('observe', 'click', set_main );

我想更改事件观察器。我的问题是，我是否必须先使用以下内容删除事件监听器:

$$('.thumb').each(function(item)
{
    Event.stopObserving(item, 'click', set_main);
});

或者我可以简单地用 $$('.set_main').invoke('observe', 'click', view ); 覆盖它吗？

这无论如何都有效，但我想知道这是否会影响性能。也许我在没有任何用处的情况下将事件监听器保留在内存中。

Answer 1

注销一个或多个事件处理程序。

如果省略 handler，则注销该 eventName 元素上的所有事件处理程序。如果 eventName 也被省略，取消注册元素上的所有事件处理程序。 (在每种情况下，只影响通过原型(prototype)注册的处理程序。)例子

假设:

$('foo').observe('click', myHandler);

...我们可以像这样停止使用该处理程序进行观察:

$('foo').stopObserving('click', myHandler);

如果我们想从“foo”中删除所有“点击”处理程序，我们将省略处理程序参数:

$('foo').stopObserving('click');

如果我们想从“foo”中删除所有事件的所有处理程序(也许我们要从 DOM 中删除它)，我们只需省略处理程序和事件名称:

$('foo').stopObserving();

一个常见的错误

当使用实例方法作为观察者时，通常对它们使用 Function#bind，例如:

$('foo').observe('click', this.handlerMethod.bind(this));

如果你这样做，这将无法注销处理程序:

$('foo').stopObserving('click', this.handlerMethod.bind(this)); // <== WRONG

Function#bind 每次被调用时都会返回一个新函数，因此如果您不保留观察时使用的引用，则无法专门解除该函数的 Hook 。 (您仍然可以解除事件的所有处理程序，或完全解除元素上的所有处理程序。)

为此，您需要保留对绑定(bind)函数的引用:

this.boundHandlerMethod = this.handlerMethod.bind(this);
$('foo').observe('click', this.boundHandlerMethod);

...然后删除:

$('foo').stopObserving('click', this.boundHandlerMethod); // <== Right