删除DOM事件观察器

时间:2013-11-06 22:32:59

标签: javascript dom

我正在基于javascript的系统中使用一些遗留代码(不祥的音乐),这个遗留代码添加了像这样的事件监听器

foo.addEventListener("click",function(){
    //do some stuff
});

我有没有办法以编程方式删除已添加的事件侦听器?我知道removeEventListener,但是从文档中不清楚如何(如果有的话)删除程序员通过匿名函数添加的监听器。

3 个答案:

答案 0 :(得分:2)

据我所知,如果您想调用removeEventListener,则无法使用匿名函数,因为您需要引用与addEventListener使用的相同功能并且唯一的方法这样做是为了有一个函数的名称(例如,不是匿名的)。

类似的问题和结论:removeEventListener on anonymous functions in JavaScript


在不更改代码结构的情况下,您可以为其命名,然后再使用该名称。

foo.addEventListener("click", function fooClickHandler(){
    //do some stuff
});

// then later
foo.removeEventListener("click", fooClickHandler);

答案 1 :(得分:1)

如果您想在添加自己的事件之前摆脱所有事件隐藏者,可以使用clonenode并删除原始事件。副本不会随之复制eventlisteners。

  var fee = foo.cloneNode();
  foo.parentNode.replaceChild(fee, foo);

应该看起来相同,但没有eventlistener。

这里有一个小提琴证明了我的观点:http://jsfiddle.net/U7w7M/1/

注意格式如何保持,位置相同,但首次点击后删除点击操作

答案 2 :(得分:1)

您可以通过传入您创建它的处理程序来添加它们,就像添加它们一样。此时处理程序不再是一个匿名函数:

var handler = function() {
  // do some stuff
};

foo.addEventListener("click", handler);
foo.removeEventListener("click", handler);

你可以做一些像这样的时髦的东西来删除具有匿名功能的处理程序,虽然我不推荐它,但它是可能的,你不能在严格模式下访问callee

document.addEventListener('click', function(e) {
    console.log('click');

    if(e.unbind) {
        document.removeEventListener('click', arguments.callee);
    }
});

var event;

// First actual real event
event = new Event('click');
document.dispatchEvent(event);

// Unbinding event
event = new Event('click');
event.unbind = true;
document.dispatchEvent(event);

// Should not fire
event = new Event('click');
document.dispatchEvent(event);