클릭 된 요소의 부모를 처리하는 자바 스크립트 이벤트 위임?

Question

http://jsfiddle.net/walkerneo/QqkkA/

나는 여기에 많은 질문을 본 적이 중 하나에 대해 물어이나 자바 스크립트에서 이벤트 위임에 대답하고,하지만 난 아직했습니다 것은 볼 수 있지만, 어떻게 될 수 없습니다 요소에 대한 이벤트 위임을 사용하는 click 이벤트의 타겟 예를 들어

:

HTML :

<ul> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
    <li><div class="d"></div></li> 
</ul>​ 

CSS :

ul{ 
    padding:20px; 
} 
li{ 
    margin-left:30px; 
    margin-bottom:10px; 
    border:1px solid black; 

} 
.d{ 
    padding:10px; 
    background:gray; 
} 
​ 

내가 그들 클릭하고 때 li 요소를 처리하는 클릭 이벤트를 추가하려면? ul 요소에 이벤트 처리기를 연결하면 div이 항상 대상 요소가됩니다. 클릭 기능에서 대상 요소의 모든 부모를 확인하는 것 외에는 어떻게해야합니까?

편집 : 내가 대신 이벤트 위임을 사용하려면

:

var lis = document.getElementsByTagName('li'); 
for(var i=0;i<lis.length;i++){ 
    lis[i].onclick = function(){}; 
} 

하지만 내가 할 경우 :

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){ 

    // e.target is going to be the div, not the li 
    if(e.target.tagName=='LI'){ 

    } 
},false); 

편집 : 내가 사용하는 방법에 관심이 아니에요 이에 대한 자바 스크립트 라이브러리, 나는 그들이 어떻게 그것을 어떻게 순수 js로 할 수있는 방법에 관심이 있어요.

var list = document.getElementsByTagName('ul')[0] 

list.addEventListener('click', function(e){ 
    var el = e.target 
    // walk up the tree until we find a LI item 
    while (el && el.tagName !== 'LI') { 
    el = el.parentNode 
    } 
    console.log('item clicked', el) 
}, false) 

이 지나치게 단순화, 루프 심지어 UL 요소지나 트리를 계속 :

Answer 1

는 여기를 해결하는 한 가지 방법입니다. 보다 완전한 예제는 rye/events의 구현을 참조하십시오.

Element.matches, Node.contains 및 Node.compareDocumentPosition 방법을 사용하면 이러한 유형의 기능을 구현하는 데 도움이 될 수 있습니다.

Answer 2

저는 자바 스크립트 괴짜가 아니라 (단지 호기심에 대한) 귀하의 질문에 대답하기 위해 온라인에서 몇 시간을 보냈습니다. 몇 분 후에 부모 항목에서 이벤트를 트리거 할 수 있다는 것을 알아 냈습니다. 예는 here입니다 클릭 요소

var el=document.getElementsByTagName('ul')[0]; 
el.addEventListener('click',function(e){ 
    var elm=e.target.parentNode; 
    if(document.createEvent) 
    { 
     evt = document.createEvent('MouseEvents'); 
     evt.initMouseEvent("click", false, true, window, 
0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     elm.dispatchEvent(evt); 
     liEventhandler(evt);   
    } 

}); 

function liEventhandler(e) 
{ 
    console.log(e); 
    console.log(e.target); 
    console.log(e.which); 
    alert(e.target.innerHTML); 
} 

의 부모를 처리하기 위해 (다른 생각, 나는이 적절하지 않다 할 수있다). IE에서 작동하지 않습니다 예를 들어 위

는 createEventObject 및

if(document.createEventObject) 
{ 
    var evt = document.createEventObject(); 
    el.fireEvent('onclick', evt); 
    liEventhandler(evt); 
} 

fireEvent 사용하고 또한 e.target window.event를합니다.1.comp.lang.javascript2 : ul 및 대상에 이벤트가 발생 난 그냥 li

일부 참조에 이벤트를 트리거 한 div 경우 srcElement 및 addEventListener는

el.attachEvent('onclick', function(){...}) 

해야한다 MOZILLA DEVELOPER NETWORK 및 this.

Answer 3

closest이라는 요소에 대한 메소드가 있습니다. 정확하게 이것을 수행합니다. 매개 변수로 CSS 선택기를 사용하고 가장 가까운 일치하는 조상을 찾습니다.이 조상은 요소 자체 일 수 있습니다. 데스크톱의 모든 최신 버전은 support이지만 일반적으로 프로덕션 환경에서는 사용할 준비가되어 있지 않습니다. 위에 링크 된 MDN 페이지에는 polyfill이 들어 있습니다.