私は要素にイベントリスナーを追加する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 
    //... 
} 

イベントしかし、リスナーは削除されていません。要素の1つをクリックすると、myfunctionのコードが再度実行されます。クリックした要素が再びクリックされないようにイベントリスナーを削除するにはどうすればよいですか？

PS：jQueryは使用しません。

Answer 1

私はあなたがほとんどそこにいると信じていますが、リスナーをremoveEventListenerに渡す必要があります。イベント自体ではありません。だから、試してみてください。

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

Answer 2

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

removeEventListener()メソッドを使用し、イベントハンドラを削除します。

またhttp://help.dottoro.com/ljahxbsx.php

object.removeEventListener (eventName, listener, useCapture);

listenerを参照してください - 必須。削除するイベントハンドラ関数への参照。削除するリスナーを渡す必要があります。

Answer 3

使用element.removeEventListener(type, listener, useCapture) は同じ要素にそれを使用し、それをあなたが追加するために行ったようにまったく同じパラメータを与えることを忘れないでください。

これをコード化する優れた方法の1つは、リスナーの詳細を変数に格納する関数を作成して、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