JavaScript Klick Ereignis Listener auf mehrere Elemente und Ziel-ID

Question

Ich habe eine Javascript-Datei, die einen EventListener von "Klick" auf jedes Element mit dem <article>-Tag setzt. Ich möchte die ID des Artikels abrufen, wenn das Ereignis ausgelöst wird. Aus irgendeinem Grund produziert mein Code nichts!

Mein javascript:

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

Warum ist das nicht funktioniert? Übrigens ist mein Artikel-Setup in einer Funktion, die aufgerufen wird, wenn das Fenster geladen wird, und ich weiß, dass das sicher funktioniert, weil diese Funktion andere Sachen hat, die funktionieren.

---

EDIT

So fixierte ich meinen Code, um es so schlingt und den Hörer zu jedem Artikel Element hinzufügen, und ich bekomme jetzt eine Warnung mit nichts drin. Wenn die Ausgabe der e.target ohne die ID versucht, erhalte ich die folgende Meldung für jedes Element:

[object HTMLHeadingElement] 

Irgendwelche Vorschläge?

---

ANOTHER EDIT

Mein aktueller Javascript-Code:

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

Dies ist meine Alertbox zeigt, wenn die Seite fertig geladen, ohne zu bedenken, dass ich nicht einen Mucks geklickt haben, : O

Answer 1

Sie übergeben kein Artikelobjekt zum Umleiten als Parameter.

starten (EDIT):

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

Hope, wird es den Fehler lösen.

Answer 2

Sie führen die Umleitungsfunktion aus, anstatt die Referenz zu übergeben, versuchen Sie dies:

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

Edit: Auch getElementsByTagName gibt ein Array mit Artikeln, so dass Sie eine Schleife durch sie haben und rufen Sie addEventListener auf jeden einzelnen von ihnen.

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 gibt einen Nodelist. Sie können dann jedem dieser Elemente einen eventlistener mit einer for-Schleife hinzufügen.

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

wenn nicht, dann durch e.id versuchen funktioniert statt e.target.id innen Alarm wie unten:

alert(this.id); 

Dank.

Answer 5

Warum erwähnt niemand ein einzelnes Ereignis, das nach dem angeklickten Element sucht?

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

es ist mehr performant weniger Ereignisse zu haben ..

wenn Sie brauchen, um auf den ganzen Körper für Click-Ereignisse nicht überprüfen Sie die Veranstaltung zu einem gewissen näher Elternelement anhängen könnte