Trình xử lý sự kiện nhấp chuột Javascript trên nhiều phần tử và nhận ID mục tiêu

Question

Tôi có tệp javascript đặt EventListener là 'click' trên mọi phần tử có thẻ <article>. Tôi muốn nhận được id của bài báo được nhấp khi sự kiện này kích hoạt. Vì lý do nào đó, mã của tôi không tạo ra gì cả!

javascript của tôi:

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

Tại sao không phải là làm việc này? BTW thiết lập bài viết của tôi là trong một chức năng gọi là khi cửa sổ được tải, và tôi biết rằng hoạt động chắc chắn bởi vì chức năng đó có những thứ khác mà làm việc.

---

EDIT

Vì vậy, tôi cố định mã của tôi vì thế nó sẽ lặp và thêm người nghe để mọi phần tử bài viết, và bây giờ tôi nhận được một hộp cảnh báo mà không có gì trong đó. Khi cố gắng xuất e.target không có ID, tôi nhận được thông báo sau cho mọi phần tử:

[object HTMLHeadingElement] 

Bất kỳ đề xuất nào?

---

KHÁC EDIT

mã javascript hiện tại của tôi:

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

này đang hiển thị hộp cảnh báo của tôi khi trang tải xong, mà không xem xét mà tôi đã không nhấp một điều chết tiệt : O

Answer 1

Bạn không chuyển đối tượng bài viết để chuyển hướng dưới dạng thông số.

Hãy thử điều này (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, nó sẽ giải quyết được lỗi.

Answer 2

Bạn đang thực hiện chức năng chuyển hướng thay vì chuyển tham chiếu, hãy thử:

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

Edit: Ngoài ra, getElementsByTagName trả về một mảng với các bài báo, vì vậy bạn phải vòng qua chúng và gọi addEventListener trên mỗi một trong số họ.

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 trả về một danh sách nốt. Sau đó, bạn có thể thêm một trình xử lý sự kiện vào từng phần tử trong đó với vòng lặp 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. 

nếu không làm việc thì thử bằng cách e.id thay vì e.target.id bên cảnh báo như sau:

alert(this.id); 

Cảm ơn.

Answer 5

Tại sao không ai đề cập đến một sự kiện duy nhất kiểm tra yếu tố được nhấp?

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

nó performant hơn để có sự kiện ít ..

nếu bạn không cần phải kiểm tra cho các sự kiện nhấp chuột trên toàn bộ cơ thể bạn có thể đính kèm sự kiện để một số yếu tố phụ huynh gần