Javascript 删除匿名事件侦听器

是否仍要删除这样添加的事件侦听器：

element.addEventListener(event, function(){/* do work here */}, false);

element.addEventListener("click", function clicked() {
    element.removeEventListener("click", clicked, false);
}, false);

---

不替换元素？

用文本函数分配事件处理程序是一件棘手的事情-不仅没有办法删除它们，而且不克隆节点并用克隆替换它-您还可以不小心地多次分配同一处理程序，如果使用对处理程序的引用，这是不会发生的。两个函数始终被视为两个不同的对象，即使它们的字符相同。

您可以像这样删除事件侦听器：

element.addEventListener(event, function(){/* do work here */}, false);

element.addEventListener("click", function clicked() {
    element.removeEventListener("click", clicked, false);
}, false);

---

除非在创建时存储了对事件处理程序的引用，否则无法干净地删除事件处理程序

---

我通常会将它们添加到该页面上的主对象中，然后在使用该对象时，您可以迭代并干净地处理它们。

您可以尝试覆盖

元素。addEventListener

并执行任何您想要的操作。

var orig = element.addEventListener;

element.addEventListener = function (type, listener) {
    if (/dontwant/.test(listener.toSource())) { // listener has something i dont want
        // do nothing
    } else {
        orig.apply(this, Array.prototype.slice.apply(arguments));
    }
};

附言：不建议这样做，但它会起作用（尚未测试）

匿名绑定事件侦听器 删除元素的所有事件侦听器的最简单方法是将其

outerHTML

分配给自身。这样做的目的是通过HTML解析器发送HTML的字符串表示，并将解析后的HTML分配给元素。因为没有传递JavaScript，所以不会有绑定的事件侦听器

document.getElementById（'demo'）.addEventListener（'click'，function（）{
警报（“Clickrd”）；
this.outerHTML=this.outerHTML；
}，假）
以下几点对我来说已经足够好了。代码处理另一个事件触发监听器从元素中移除的情况。不需要预先声明函数

myElem.addEventListener("click", myFunc = function() { /*do stuff*/ });

/*things happen*/

myElem.removeEventListener("click", myFunc);

如果使用jQuery，请尝试
off
方法

$("element").off("event");

Jquery.off（）方法删除附加了.on（）
编辑：的事件处理程序。根据注释的建议，您应该使用。off（）而不是。unbind（）因为.unbind（）从Jquery 3.0开始就被弃用，从Jquery 1.7开始被取代

尽管这是一个老问题，并且没有提到jQuery，但我将在这里发布我的答案，因为这是搜索术语“jQuery移除匿名事件处理程序”的第一个结果

您可以尝试使用该函数删除它


$（'#按钮1'）。单击（函数（）{
警报（“这是一项测试”）；
});
$（'#btnRemoveListener'）。单击（函数（）{
$（'按钮1'）。关闭（'单击'）；
});

点击我

删除侦听器
旧问题，但这里有一个解决方案

严格来说，除非存储对函数的引用，否则不能删除匿名事件侦听器。由于使用匿名函数的目的可能不是创建新变量，因此可以将引用存储在元素本身中：

element.addEventListener('click',element.fn=function fn() {
    //  Event Code
}, false);

稍后，如果要删除它，可以执行以下操作：

element.removeEventListener('click',element.fn, false);

请记住，第三个参数（
false
）的值必须与添加事件侦听器的值相同

然而，这个问题本身引出了另一个问题：为什么

使用
.addEventListener（）
而不是更简单的
.onsomething（）
方法有两个原因：

首先，它允许添加多个事件侦听器。当有选择地删除它们时，这就成了一个问题：您可能最终会给它们命名。如果您想将它们全部删除，那么@tidy giant的
outerHTML
解决方案非常好

其次，您可以选择捕获事件，而不是冒泡事件

如果这两个原因都不重要，您可能会决定使用更简单的
onsomething
方法。
通过ECMAScript2015（ES2015，ES6）语言规范，可以使用此
name和selfbind
函数神奇地将匿名回调转换为命名回调，甚至将其主体绑定到自身，允许事件侦听器从内部删除自身以及从外部范围删除它（）：

如果有多个匿名侦听器，您将如何选择要删除的正确侦听器？@Sean Hogan:什么？我不明白你所问的与我的问题有什么关系。@Sean：我想目的是从事件处理程序中删除事件侦听器。总之，“你不能”吗？这就是我认为正确的答案。如果您将它们指定为属性，而不使用addEventListener，则可以。element.onmouseover=function（）{dothis}；元素onmouseover=''；在Greasemonkey应用程序中，我们无法控制如何在基本页中创建事件。仅供参考，在GM脚本中，像
element.onmouseover=function
这样的东西无论如何都不会工作，因为沙箱保护。请参阅。只有当您首先添加事件侦听器时，这才有效——您可以修改原始的listener（）代码。因为这是一个Greasemonkey应用程序，所以这是不可能的。即使更改了基本页脚本，您也只能添加另一个匿名侦听器。@Brock:噢，我原以为这样做是为了删除您添加的侦听器。我不知道有什么方法可以删除您未添加且未引用其功能的侦听器。Brock是正确的，这是一个关于用户脚本的问题，但答案不错，我投了弃权票！您可能需要补充的是，由于ES5（请参阅或）@fxm:Thank，被调用方
已被弃用。我不记得我最初为什么使用
参数。被调用方
和命名函数表达式应该可以正常工作，所以我编辑了我的答案。或者，您可以替换
EventTarget.prototype.addEventListener
。这对我有效。你违反了问题的限制。我想知道为什么addeventlistener不返回这样一个引用供removeeventlistener将来使用……是的，这就是你保存的。@Joe和迟到的用户：
addeventlistener
至少在某些情况下返回
未定义的
。例如，在广播频道上下文中。注意