जावास्क्रिप्ट एकाधिक तत्वों पर ईवेंट श्रोता क्लिक करें और लक्ष्य आईडी

Question

प्राप्त करें मेरे पास एक जावास्क्रिप्ट फ़ाइल है जो <article> टैग के साथ प्रत्येक तत्व पर 'क्लिक' का इवेंट लिस्टनर सेट करती है। जब ईवेंट आग लगती है तो मैं लेख की आईडी प्राप्त करना चाहता हूं। किसी कारण से, मेरा कोड कुछ भी नहीं पैदा करता है!

मेरे जावास्क्रिप्ट:

articles = document.getElementsByTagName('article'); 
articles.addEventListener('click',redirect(e),false); 
function redirect(e){ 
alert(e.target.id); 
} 

क्यों इस काम की नहीं है? बीटीडब्ल्यू मेरा आलेख सेटअप एक फ़ंक्शन में है जिसे विंडो लोड होने पर बुलाया जाता है, और मुझे पता है कि यह सुनिश्चित करने के लिए काम करता है क्योंकि उस फ़ंक्शन में अन्य सामान हैं जो काम करते हैं।

---

संपादित

तो मैं ऐसा हर लेख तत्व को श्रोता जोड़ने यह पाश होगा और मेरे कोड तय है, और अब मैं इसे में कुछ भी नहीं के साथ एक बॉक्स मिलता है। आईडी के बिना e.target को आउटपुट करने का प्रयास करते समय, मुझे प्रत्येक तत्व के लिए निम्न संदेश मिलता है:

[object HTMLHeadingElement] 

कोई सुझाव?

---

किसी अन्य संपादन का

मेरे वर्तमान जावास्क्रिप्ट कोड:

function doFirst(){ 
articles = document.getElementsByTagName('article'); 
for (var i = 0; i < articles.length; i++) { 
    articles[i].addEventListener('click',redirect(articles[i]),false); 
} 
} 

function redirect(e){ 
alert(e.id); 
} 
window.addEventListener('load',doFirst,false); 

यह मेरी सूचना के बक्से के प्रदर्शित होने पर पेज, समाप्त हो गया लोड हो रहा है पर विचार है कि मैं एक बहुत बात क्लिक नहीं किया बिना : ओ

Answer 1

आप पैरामीटर के रूप में रीडायरेक्ट करने के लिए आलेख ऑब्जेक्ट नहीं दे रहे हैं।

इस (संपादित) का प्रयास करें:

articles = document.getElementsByTagName('article'); 
for (var i = 0; i < articles.length; i++) { 
    articles[i].addEventListener('click',redirect,false); 
} 
function redirect(ev){ 
    alert(ev.target.id); 
} 

आशा है, यह बग का समाधान होगा।

Answer 2

आप संदर्भ पारित करने के बजाय रीडायरेक्ट फ़ंक्शन निष्पादित कर रहे हैं, इसे आजमाएं:

articles = document.getElementsByTagName('article'); 
articles.addEventListener('click',redirect,false); 
function redirect(e){ 
    alert(e.target.id); 
} 

संपादित करें: इसके अलावा, getElementsByTagName लेख के साथ एक सरणी देता है, ताकि आप उन्हें लूप करने के लिए है और उनमें से हर एक पर addEventListener कहते हैं।

articles = document.getElementsByTagName('article'); 
for (var i = 0; i < articles.length; i++) { 
    articles[i].addEventListener('click',redirect,false); 
} 
function redirect(e){ 
    alert(e.target.id); 
} 

Answer 3

getElementsByTagName एक नोडलिस्ट लौटाता है। फिर आप लूप के साथ उन तत्वों में से प्रत्येक को इवेंटलिस्टर जोड़ सकते हैं।

<div id="test"> 
hey 
</div> 
<div id="test2"> 
yo 
</div> 

<script> 
var nl = document.getElementsByTagName('div'); 

for(var i=0; i<nl.length; i++){ 
    nl[i].addEventListener('click', function(e){ 
     alert(e.target.id); 
    },false); 
} 
</script> 

Answer 4

articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did. 

तो काम नहीं करता है के रूप में नीचे चेतावनी के अंदर के बजाय e.id e.target.id से प्रयास करें:

alert(this.id); 

धन्यवाद।

Answer 5

किसी भी घटना का उल्लेख क्यों नहीं करता है जो क्लिक किए गए तत्व की जांच करता है?

document.body.addEventListener('click', function(e) { 
    var target = e.target; 
    if (target.nodeName === 'article') { 
     // do whatever you like ;-) 
    } 
    e.stopPropagation() 
}); 

यह .. कम घटनाओं के लिए अधिक performant है

आप कुछ करीब पेरेंट तत्व को घटना देते हैं सकता है अगर आप पूरे शरीर पर क्लिक घटनाओं के लिए जाँच करने के लिए की जरूरत नहीं है