Delegowanie zdarzeń JavaScript, obsługa rodziców klikniętych elementów?

Question

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

Widziałem wiele pytań tutaj albo prosząc o czym odpowiedział lub delegacji zdarzeń w JavaScript, ale jeszcze nie mam, aby zobaczyć, jednak, jak korzystać z delegacji zdarzeń dla elementów, które nie będą cele zdarzenia kliknięcia.

Na przykład:

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; 
} 
​ 

Co jeśli chcę dodać zdarzenie click do obsługi li elementów, gdy są one kliknięty? Jeśli dołączę moduł obsługi zdarzeń do elementu ul, zawsze będą to elementy docelowe. Oprócz sprawdzenia każdego elementu macierzystego elementu docelowego w funkcji kliknięcia, w jaki sposób mogę to zrobić?

edit:

chcę użyć delegacji zdarzeń zamiast:

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

Ale jeśli to zrobię:

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); 

EDIT: Nie jestem zainteresowany jak korzystać Biblioteki JavaScript dla tego, jestem zainteresowany, jak to robią i jak można to zrobić z czystym js.

Answer 1

Oto jeden ze sposobów, aby rozwiązać go:

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) 

To jest zbyt uproszczony, Pętla będzie się na drzewo nawet obok elementu ul. Zobacz implementację w rye/events, aby uzyskać pełniejszy przykład.

Metody mogą pomóc w implementacji tego typu funkcji.

Answer 2

Nie jestem maniakiem javascript, ale żeby odpowiedzieć na twoje pytanie (tylko dla ciekawości) Spędziłem trochę czasu w Internecie i po kilku minutach zorientowałem się, że możesz wywołać zdarzenie na elemencie nadrzędnym również w ten sposób (jako alternatywnego pomysłu, może nie jestem odpowiednio) do obsługi rodziców kliknęli elementów

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); 
} 

przykładem jest here.

powyższym przykładzie nie będzie działać w IE korzysta createEventObject i fireEvent

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

a także e.target jest window.event.srcElement i addEventListener powinny być

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

Kiedy Zdarzenie na ul i cel jest div Właśnie wywołał zdarzenie na li

niektóre odniesienia:1.comp.lang.javascript2.MOZILLA DEVELOPER NETWORK i 3.this.

Answer 3

Istnieje teraz metoda na elementach o nazwie closest, która robi dokładnie to. Jako parametr przyjmuje selektor CSS i znajduje najbliższy pasujący element nadrzędny, którym może być sam element. Wszystkie obecne wersje przeglądarek na komputery są w tej wersji, ale ogólnie nie są gotowe do użytku produkcyjnego. Strona MDN powiązana powyżej zawiera polyfill.