जावास्क्रिप्ट घटना प्रतिनिधिमंडल, क्लिक किए गए तत्वों के माता-पिता को संभालने?

Question

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

मैं यहाँ कई सवाल देखा है या तो के बारे में पूछ या जावास्क्रिप्ट में घटना प्रतिनिधिमंडल के साथ उत्तर दिया जा रहा है, लेकिन मैं अभी तक है को देखने के लिए, तथापि, कैसे घटना प्रतिनिधिमंडल तत्वों है कि होने के लिए नहीं जा रहे हैं के लिए उपयोग करने के लिए क्लिक घटना के लक्ष्य।

उदाहरण के लिए:

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

सीएसएस:

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

संपादित करें: मैं कैसे उपयोग करने के लिए कोई दिलचस्पी नहीं हूँ इस के लिए जावास्क्रिप्ट पुस्तकालय, मुझे दिलचस्पी है कि वे इसे कैसे करते हैं और यह शुद्ध जेएस के साथ कैसे किया जा सकता है।

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) 

यह बेहद सरल है, पाश भी यूएल तत्व के बाद कुछ पेड़ पर बने रहेंगे:

Answer 1

यहाँ इसे हल करने के लिए एक तरीका है। अधिक पूर्ण उदाहरण के लिए rye/events में कार्यान्वयन देखें।

Element.matches, Node.contains और Node.compareDocumentPosition विधियां इस प्रकार की सुविधाओं को लागू करने में आपकी सहायता कर सकती हैं।

Answer 2

मैं जावास्क्रिप्ट गीक नहीं हूं लेकिन आपके प्रश्न का उत्तर देने के लिए (केवल जिज्ञासा के लिए) मैंने कुछ समय ऑनलाइन बिताया है और कुछ मिनटों के बाद मुझे पता चला है कि आप इस तरह के मूल तत्व पर एक ईवेंट ट्रिगर कर सकते हैं (एक वैकल्पिक विचार के रूप में, हो सकता है मैं उचित नहीं कर रहा हूँ) पर क्लिक किया तत्वों

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

एक उदाहरण here है के माता-पिता को संभालने के लिए।

उदाहरण IE में काम नहीं करेगा ऊपर createEventObject और fireEvent

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

का उपयोग करता है और यह भी e.target window.event है।srcElement और addEventListener

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

होना चाहिए जब ul और लक्ष्य पर घटना आग div है मैं सिर्फ li

कुछ संदर्भों पर एक घटना शुरू हो रहा है:1.comp.lang.javascript2.MOZILLA DEVELOPER NETWORK और 3.this।

Answer 3

अब closest नामक तत्वों पर एक विधि है, जो वास्तव में यह करता है। यह पैरामीटर के रूप में एक सीएसएस चयनकर्ता लेता है और निकटतम मिलान करने वाले पूर्वजों को पाता है, जो तत्व ही हो सकता है। डेस्कटॉप ब्राउज़र के सभी मौजूदा संस्करण support इसे, लेकिन सामान्य रूप से यह उत्पादन के उपयोग के लिए तैयार नहीं है। उपरोक्त लिंक किए गए एमडीएन पेज में एक पॉलीफिल है।