在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.

Answer 1

我相信,你几乎没有,但你必须要通过监听到removeEventListener,而不是事件本身.所以尝试:

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

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