删除 DOM 事件观察器

Removing DOM Event Observer

本文关键字：观察 事件 DOM 删除      更新时间：2023-09-26

我正在使用一些遗留代码（不祥的音乐）的基于 javascript 的系统，这个遗留代码添加了这样的事件侦听器

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

有没有办法以编程方式删除像这样添加的事件侦听器？ 我知道 removeEventListener，但从文档中不清楚如何（如果有的话）删除程序员通过匿名函数添加的侦听器。

据

我所知，如果你想调用removeEventListener，你不能使用匿名函数，因为你需要引用你与addEventListener一起使用的相同函数，唯一的方法是为函数命名（例如，不是匿名的）。

类似的问题和结论在这里：在JavaScript中的匿名函数上删除EventListener

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

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

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

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);
如果你想在

添加自己的事件侦听器之前摆脱所有的事件监听器，你可以使用clonenode并删除original。该副本不会复制事件侦听器。

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

应该看起来相同，但没有事件侦听器。

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

请注意格式如何保持，位置相同，但单击操作在第一次单击后被删除

相关文章：