移除 JavaScript 中的事件监听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8841138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove event listener in JavaScript
提问by reggie
I add an event listener to an element:
我向元素添加了一个事件侦听器：
/* sitepoint.com/javascript-this-event-handlers */
function AttachEvent(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
}else{
element.attachEvent("on"+type, handler);
}
}
window.addEventListener("load", function() {
var els = getElementsByClassName('name', 'img');
var elsnum = els.length;
if(elsnum) //found
{
var i = 0;
for(i=0; i < elsnum; i++)
{
var the_els = els[i];
AttachEvent(the_els, "click", myfunction);
}
}
}, false);
Later in myfunction, I want to remove the handler again, to prevent duplicate clicks:
稍后myfunction，我想再次删除处理程序，以防止重复点击：
function myfunction(e) {
e = e || window.event;
var target = e.target || e.srcElement;
//more code
//...
//remove click handler
target.removeEventListener('click', e, false);
//more code
//...
}
The event listener is not being removed, though. When I click on one of the elements, the code of myfunctionis executed again. How can I remove the event listener to prevent the clicked element from being clicked again?
但是，事件侦听器并未被删除。当我单击其中一个元素时，将myfunction再次执行的代码。如何删除事件侦听器以防止再次单击被单击的元素？
PS: I do not use jQuery.
PS：我不使用jQuery。
回答by bfavaretto
I believe you're almost there, but you have to pass the listenerto removeEventListener, not the event itself. So try:
我相信您快到了，但是您必须将侦听器传递给removeEventListener，而不是事件本身。所以尝试：
target.removeEventListener('click', myFunction, false);
回答by TERMtm
Use element.removeEventListener(type, listener, useCapture)Remember to use that on the same element, and give it the exact same parameters as you did for adding.
使用element.removeEventListener(type, listener, useCapture)请记住在同一元素上使用它，并为其提供与添加时完全相同的参数。
One excellent way to code this would be to make a function that stores the listener details in a variable, mimicking how setTimeout()works for instance, and adding that to the element prototype. Here's an example function.
对此进行编码的一种极好方法是创建一个将侦听器详细信息存储在变量中的函数，setTimeout()例如模仿工作原理，并将其添加到元素原型中。这是一个示例函数。
HTMLElement.prototype.eventListener=
function(type, func, capture){
if(typeof arguments[0]=="object"&&(!arguments[0].nodeType)){
return this.removeEventListener.apply(this,arguments[0]);
}
this.addEventListener(type, func, capture);
return arguments;
}
That will add a method to all HTML nodes that already can accept event listners, and allow you to do this.
这将向所有已经可以接受事件侦听器的 HTML 节点添加一个方法，并允许您执行此操作。
var a=element.eventListener('click', myFunction, false); //to add
element.eventListener(a); //to remove
回答by Luke Shaheen
http://www.quirksmode.org/js/events_advanced.html
http://www.quirksmode.org/js/events_advanced.html
To remove an event handler, use the removeEventListener()method.
要删除事件处理程序，请使用removeEventListener()方法。
Also see http://help.dottoro.com/ljahxbsx.php
另见http://help.dottoro.com/ljahxbsx.php
object.removeEventListener (eventName, listener, useCapture);
object.removeEventListener (eventName, listener, useCapture);
listener- Required. Reference to the event handler function to remove. You need to pass what listener you want to remove.
listener- 必需的。对要移除的事件处理函数的引用。您需要传递要删除的侦听器。
