JavaScript中如何移除事件监听器

Question

我向一个元素添加了一个事件监听器：

/* 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);

之后在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
    //...
}

但是，事件监听器并没有被移除。当我单击其中一个元素时，myfunction 的代码会再次执行。如何删除事件监听器以防止再次单击已单击的元素？

PS：我不使用jQuery。

- reggie

---

如果你想要更简单的实现方式，可以看看我在底部的回答。;) - TERMtm

可能是JavaScript: remove event listener的重复问题。 - Heretic Monkey

Answer 1

我认为你已经接近成功了，但是你需要把监听器(listener)传递给removeEventListener，而不是事件本身。所以请尝试:

target.removeEventListener('click', myFunction, false);

- bfavaretto

---

不客气！别忘了使用element.detachEvent来处理IE。如果不确定，可以看一下John发布的quirksmode链接，这是关于这个主题的一篇优秀文章。 - bfavaretto

Answer 2

使用element.removeEventListener(type, listener, useCapture)，记得在同一元素上使用，并给它与添加时完全相同的参数。

编写这个函数的一个绝佳方法是将侦听器详细信息存储在变量中，模仿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;
}

那将会给所有已经可以接受事件侦听器的HTML节点添加一个方法，并使你能够这样做。

var a=element.eventListener('click', myFunction, false); //to add
element.eventListener(a); //to remove

- TERMtm

Answer 3

http://www.quirksmode.org/js/events_advanced.html

要删除事件处理程序，请使用removeEventListener()方法。

另请参见http://help.dottoro.com/ljahxbsx.php

object.removeEventListener(eventName, listener, useCapture);

listener - 必需。对要删除的事件处理函数的引用。您需要传递要删除的监听器。

- Luke Shaheen