Listener di eventi Javascript in clic su più elementi e ottenere l'ID di destinazione

Question

Ho un file javascript che imposta un EventListener di "clic" su ogni elemento con il tag <article>. Voglio ottenere l'ID dell'articolo cliccato quando l'evento si attiva. Per qualche ragione, il mio codice non produce nulla!

mio javascript:

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

Perché non è questo lavoro? BTW il mio articolo di installazione è in una funzione chiamata quando la finestra viene caricata, e so che funziona sicuramente perché quella funzione ha altre cose che funzionano.

---

EDIT

Così ho fissato il mio codice in modo che in loop e aggiungere l'ascoltatore ad ogni elemento articolo, e ora ho una finestra di avviso con niente dentro. Quando si cerca di uscita e.target senza l'ID, ottengo il seguente messaggio per ogni elemento:

[object HTMLHeadingElement] 

Qualche suggerimento?

---

ALTRO EDIT

Il mio codice javascript corrente:

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

Questo sta mostrando le mie scatole di avviso quando la pagina terminato il caricamento, senza considerare che non ho fatto clic su un bel niente : O

Answer 1

Non si passa un oggetto articolo a reindirizzare come parametro.

Prova questa (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); 
} 

Speranza, che possa risolvere il bug.

Answer 2

Si sta eseguendo la funzione di reindirizzamento anziché passare il riferimento, provare questo:

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

Edit: Inoltre, getElementsByTagName restituisce un array con gli articoli, in modo da avere a ciclo attraverso di loro e chiamare addEventListener su ciascuno di essi.

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 restituisce un nodelist. È quindi possibile aggiungere un listener di eventi a ciascuno di questi elementi con un ciclo for.

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

se non funziona quindi provare da e.id invece di e.target.id all'interno allerta, come di seguito:

alert(this.id); 

Grazie.

Answer 5

Perché nessuno menziona un singolo evento che verifica l'elemento selezionato?

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

è più performante per avere meno eventi ..

se non è necessario verificare la presenza di eventi click su tutto il corpo si potrebbe collegare l'evento di qualche elemento genitore più vicino