イベントを一度だけ登録する

Question

ajaxでページを読み込むための小さなスクリプトを作成しました。 ajax-plsクラスを持つすべてのリンクを選択する必要があります。

イベントリスナーを追加した後、私はクラスを削除します。なぜなら、毎回、含まれるhtmlを解析する必要があるからです。

(function() { 
    function addEvent(element, evnt, funct){ 
    if (element.attachEvent) 
     return element.attachEvent('on'+evnt, funct); 
    else 
     return element.addEventListener(evnt, funct, false); 
    } 

    var link_click = function (e) { 
     e.preventDefault(); 
     if (this.getAttribute("href") == 'test1.html') { 
     var content = document.getElementById('content'); 
     content.innerHTML = "<a href='test3.html' class='ajax-pls'>Test3</a>"; 
     register_listeners(); 
     } else { 
     alert(this); 
     } 
    }; 

    function register_listeners() { 

    var atags = document.querySelectorAll('a.ajax-pls'); 
    for (i = 0; i < atags.length; i++) { 
     addEvent(atags[i], 'click', link_click); 
     atags[i].classList.remove("ajax-pls"); 
    } 
    } 

    register_listeners(); 
})(); 

単なるテストコードです。しかし、私はクラスでトリックをする必要がありますか？それとも、すべてのインクルードの後に​​register_listeners（）を呼び出すことができますか？

Answer 1

はい、それ以外の場合はクラスを削除する必要があります。addEventは、各リンクに同じハンドラーを何度も追加します。

ただし、イベントのバブリングを使用してこの問題を回避できます。

すべてのリンクの最も近い共通祖先にハンドラーを追加すると（最悪の場合はdocument.bodyになります）。それはその中のすべての要素のすべてのクリックイベントを捕捉します。 event.targetをチェックしてフィルタリングする必要があります。