लागू होने के बिना शुद्ध जावास्क्रिप्ट के साथ ली तत्व प्राप्त करें प्रत्येक तत्व पर क्लिक करें

Question

सबसे पहले मैं jQuery का उपयोग नहीं करना चाहता, केवल शुद्ध जावास्क्रिप्ट; कृपया डुप्लिकेट jQuery पोस्ट से लिंक न करें।

अगर मैं

<ul id="bulk"> 
    <li id="one"></li> 
    <li id="bmw"></li> 
</ul> 

मैं क्लिक किया सूची तत्व की आईडी प्राप्त करना चाहते हैं की तरह एक सूची है। मुझे पता है कि मैं प्रत्येक तत्व में ऑनक्लिक = "" जोड़ सकता हूं लेकिन उत्पादन सूची में 2000 प्रविष्टियां हैं और मुझे लगता है कि एक बेहतर तरीका मौजूद है।

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

अगर मैं id='singular' के साथ केवल एक li तत्व था मैं निम्नलिखित जावास्क्रिप्ट का उपयोग आईडी क्लिक किया पाने के लिए कर सकते हैं।

var li = document.getElementById('singular').onclick = function() { do something }; 

के रूप में वहाँ li तत्वों के हजारों कर रहे हैं, इस कोड काम नहीं करेगा।

मैं निम्नलिखित जावास्क्रिप्ट के साथ तत्व नामों की सूची प्राप्त करने में सक्षम किया गया है:

var bulk = document.getElementById('bulk'); 
var bulkli = tabs.getElementsByTagName('li'); 
//bulkli contains ["one", "bmw"]; 

लेकिन यह मुझे बता नहीं है जो एक को क्लिक किए।

Answer 1

आप पेरेंट ul पर एक ईवेंट श्रोता जोड़ सकते हैं और फिर क्लिक किए गए तत्व के id प्राप्त करने के लिए e.target.id का उपयोग कर सकते हैं। बस यह सुनिश्चित करने के लिए जांचें कि क्लिक किए गए तत्व वास्तव में li है क्योंकि यह संभव है कि आप एक पर क्लिक नहीं कर सकते हैं।

Example Here

var ul = document.getElementById('bulk'); // Parent 

ul.addEventListener('click', function(e) { 
    if (e.target.tagName === 'LI'){ 
     alert(e.target.id); // Check if the element is a LI 
    } 
}); 

---

के रूप में टिप्पणी में कहा, जब एक li के बच्चे क्लिक किया जाता है इस दृष्टिकोण काम नहीं करेगा। इसे हल करने के लिए, आपको यह देखने के लिए जांच करनी होगी कि क्लिक किए गए तत्व का मूल तत्व वह है जिसे क्लिक ईवेंट से जुड़ा हुआ है।

Example Here

var ul = document.getElementById('bulk'); // Parent 

ul.addEventListener('click', function (e) { 
    var target = e.target; // Clicked element 
    while (target && target.parentNode !== ul) { 
     target = target.parentNode; // If the clicked element isn't a direct child 
     if(!target) { return; } // If element doesn't exist 
    } 
    if (target.tagName === 'LI'){ 
     alert(target.id); // Check if the element is a LI 
    } 
}); 

Answer 2

आप इस का उपयोग कर सकते हैं:

var link = document.getElementById("bulk"); 
attachEvent(link, "click", EventHandler); 

function attachEvent(element, type, handler) { 
    if (element.addEventListener) element.addEventListener(type, handler, false); 
    else element.attachEvent("on"+type, handler); 
} 

function EventHandler(e) { 
    console.log(e.target.id); 
} 

fiddle

अगर li इस काम children` तत्व हैं:

fiddle example with children

Answer 3

ऑनक्लिक-फ़ंक्शन में पैरामीटर के रूप में अपनी आईडी को पास करें।

this.getAttribute('id')