只註冊一次事件

Question

我寫了一個小腳本，用ajax加載頁面。應該選擇所有具有ajax-pls - 類的鏈接。

當我添加eventlistener後，我刪除了類，因爲我需要每次解析包含的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來過濾它們。