JavaScript nasłuchiwanie zdarzeń na wielu elementach i uzyskanie ID celu

Question

Mam plik javascript, który ustawia EventListener "kliknięcia" na każdym elemencie z tagiem <article>. Chcę uzyskać identyfikator klikniętego artykułu po uruchomieniu zdarzenia. Z jakiegoś powodu mój kod nic nie produkuje!

Moje javascript:

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

Dlaczego nie jest to działa? BTW moja konfiguracja artykułu jest w funkcji wywoływanej, gdy okno jest ładowane, i wiem, że działa na pewno, ponieważ ta funkcja ma inne rzeczy, które działają.

---

EDIT

więc naprawiłem mój kod tak, że będzie pętla i dodać słuchacza do każdego elementu artykułu, a teraz pojawia się okno ostrzeżenia ze nic w nim. Podczas próby wysłania e.target bez identyfikatora otrzymuję następujący komunikat dla każdego elementu:

[object HTMLHeadingElement] 

Wszelkie sugestie?

---

KOLEJNA EDYCJA

Mój obecny kod javascript:

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

To pokazuje moje pola powiadomienie, gdy strona zakończeniu ładowania, nie biorąc pod uwagę, że nie kliknął cholerstwa : O

Answer 1

Nie przekazujesz obiektu artykułu do przekierowania jako parametru.

Spróbuj (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); 
} 

Nadzieja, to rozwiąże problem.

Answer 2

Wykonujesz funkcję przekierowania zamiast przekazywania referencji, spróbuj tego:

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

Edit: Również getElementsByTagName zwraca tablicę z artykułów, więc trzeba pętli przez nich i nazywają addEventListener na każdej z nich.

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 zwraca nodelistę. Następnie możesz dodać listę zdarzeń do każdego z tych elementów za pomocą pętli 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. 

jeśli nie działa spróbuj przez e.id zamiast e.target.id wewnątrz wpisu jak poniżej:

alert(this.id); 

Dzięki.

Answer 5

Dlaczego nikt nie wspomina o jednym zdarzeniu, które sprawdza kliknięty element?

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

to bardziej wydajnych mieć mniej zdarzeń ..

jeśli nie trzeba sprawdzać wydarzenia kliknij na całym ciele można dołączyć zdarzenie do jakiegoś bliżej elementu nadrzędnego