Javascript olay delegasyonu, tıklanan elemanların ebeveynlerini ele alıyor mu?

Question

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

Burada çok soru gördüm ya soran veya javascript olay heyeti ile cevap veriyor, ama henüz ettik görmek için, ancak, nasıl olacak değildir elemanları için olay Yetkinin kullanılması click etkinliğinin hedefleri. Örneğin

:

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

Ne tıklandıkları yaparken li elemanları işlemek için bir tıklama etkinlik eklemek isterseniz? ul öğesine bir olay işleyicisi eklerseniz, div s her zaman hedef öğeler olur. Hedef öğenin her ebeveyini bir tıklama işlevinde kontrol etmenin dışında, bunu nasıl başarabilirim?

düzenleme: yerine olay heyeti kullanmak istiyorum

:

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

Ama bunu yaparsam:

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

DÜZENLEME: Ben nasıl kullanılacağını ilgilenmiyorum Bu için Javascript kitaplıkları, nasıl yaptıkları ve saf js ile nasıl yapılabilir ilgileniyorum.

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) 

Bu aşırı basitleştirilmiş olduğunu, döngü bile UL elemanı geçmiş ağaca devam edecektir:

Answer 1

İşte bunu çözmek için tek yol bu. Daha eksiksiz bir örnek için rye/events numaralı uygulamaya bakın. Bu tür özellikleri uygulamanıza yardımcı olan yöntemler Element.matches, Node.contains ve Node.compareDocumentPosition yöntemleri yardımcı olabilir.

Answer 2

Ben javascript geek değilim ama sorunuzu cevaplamak için (sadece merak için) Online biraz zaman geçirdim ve birkaç dakika sonra ana öğe üzerinde de bir olayı tetikleyebileceğinizi anladım bir örnek here olduğunu tıklandığında elemanlar

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

ebeveynleri işlemek için (alternatif bir düşünce olarak, ben uygun değilim olabilir). IE'de çalışmaz Yukarıdaki örnek

createEventObject ve

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

fireEvent kullanır ve ayrıca e.target window.event olduğunu.1.comp.lang.javascript2.: ul ve hedefte olay patlar Sadece li

Bazı referanslara etkinlik tetiklemiş ettik div olduğunda srcElement ve addEventListener

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

olmalıdır MOZILLA DEVELOPER NETWORK ve 3.this.

Answer 3

Şimdi tam olarak bunu yapan closest adlı öğelerde bir yöntem var. Bir CSS seçiciyi parametre olarak alır ve elemanın kendisi olabilecek en yakın eşleştiriciyi bulur. Masaüstü tarayıcıların tüm güncel sürümleri support, ancak genel olarak üretim için kullanıma hazır değil. Yukarıda bağlantılı MDN sayfası bir polifiliz içerir.