이벤트를 한 번만 등록하십시오.

Question

아약스가있는 페이지를로드하는 작은 스크립트를 작성했습니다. 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(); 
})(); 

단지 테스트 코드 일뿐입니다. 하지만 클래스를 통해 트릭을 수행해야합니까, 아니면 모든 include 후에 register_listeners()를 호출 할 수 있습니까?

Answer 1

예, 그렇지 않으면 클래스를 제거해야합니다. addEvent은 각 링크에 동일한 핸들러를 여러 번 추가합니다.

하지만 이벤트 버블 링을 사용하면이 문제를 피할 수 있습니다.

모든 링크의 가장 가까운 공통 조상에 처리기를 추가하면 (최악의 경우 처리기는 document.body이됩니다). 내부의 모든 요소에 대한 모든 클릭 이벤트를 catch합니다. event.target을 선택하여 필터링해야합니다.