자바 스크립트 클릭 이벤트 처리

Question

그래서 어떤 이벤트에서 앵커가 스팬 자식 요소를 가지고있는 경우, 어떤 이벤트에서 클릭 이벤트가 클래스 yui3-pjax이있는 특정 앵커에서 발생하는 것을보기 위해 문서에 이벤트를 첨부합니다. 단순히 앵커에 대한 클릭 이벤트 버블을 어떻게 볼 수 있습니까? 이벤트를 시청 내 현재의 경우 문은 다음과 같습니다

document.addEventListener('click', function(evt) { 
    if(evt.target.classList.contains('yui3-pjax') || evt.target.parentNode.classList.contains('yui3-pjax')) { 
    // do stuff 
    } 
}); 

HTML 미리보기

<a class="page_current yui3-pjax" href="/forum/chatterbox/last-person-to-reply-wins/t.94028885_991/" title="page 67"> 
    67 
</a> 
<a class="yui3-pjax cta-button-sm gray-button postitem-link pull-right" href="/forum/chatterbox/last-person-to-reply-wins/t.94028885_991/"> 
    <span>67</span> 
</a> 

앵커와 스팬 요소의 부모 모두를 보는 것보다 더 좋은 방법 (같은이 있는지 잘 모르겠어요 앵커)를 앵커 자체에 바인딩하지 않고 앵커 중 일부가 동적으로 생성된다는 문제가 있고 this은 문서를 참조하기 때문에 분명히 작동하지 않습니다. 어떤 아이디어?

편집 : 내가 묻는 것에 대해 혼란이 있다고 생각합니다. yui3-pjax 클래스가있는 경우에만 앵커를 확인해야한다는 점을 분명히 설명합니다. 나는 그 앵커의 자식 또는 하위 요소로부터 이벤트 전파/버블 링을 처리하는 방법을 잘 모르겠습니다.

Answer 1

희망이 내용을 올바르게 이해하고 있습니다. 특정 클래스의 요소와 부모를 수동으로 검사하는 대신, 대신 DOM을 반복하여 이벤트 대상이 주어진 클래스의 요소 내에 포함되어 있는지 여부를 확인하는 함수를 작성합니다. 이렇게하면 HTML의 구조에 의존하는 코드를 작성할 필요가 없지만 요소가 (예) 클래스 'yui3-pjax'가있는 요소 내부에 있는지 여부가 동적으로 결정됩니다. 참고 'yui3-pjax'클래스의 요소가 앵커인지 확인하지는 않지만 필요한 경우 추가 할 수 있습니다. 바이올린 http://jsfiddle.net/9L0jce6x/을 확인하십시오.

document.addEventListener('click', function(evt) { 
    if(elementOrParentsHaveClass(evt.target, 'yui3-pjax')){ 
     //do stuff 
    } 
}); 

//Recurse up the DOM until we find a parent with the given class, or return false if we don't 
function elementOrParentsHaveClass(elem, className){ 
    if(elem && elem.classList.contains(className)){ 
     return true; //yay! 
    }else{ 
     //Recurse only if parent exists 
     if(elem.parentNode){ 
      return elementOrParentsHaveClass(elem.parentNode, className); 
     } 
     else{ 
      //If the parent node does not exist, end recursion - we finished recursing up the DOM 
      return false; 
     } 
    } 
}