Javascript单击多个元素上的事件侦听器并获取目标ID

Question

我有一个javascript文件,在带有<article>标记的每个元素上设置一个'click'的EventListener .我希望在事件触发时获得点击文章的ID.出于某种原因,我的代码什么都没有!

我的javascript:

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

为什么这不起作用？BTW我的文章设置是在窗口加载时调用的函数,我知道这是有效的,因为该函数有其他功能.

---

编辑

所以我修复了我的代码,所以它将循环并将监听器添加到每个文章元素,现在我得到一个没有任何内容的警报框.当尝试输出没有ID的e.target时,我会为每个元素获得以下消息:

[object HTMLHeadingElement]

有什么建议？

---

另一个编辑

我目前的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);

这是在页面完成加载时显示我的警告框,而没有考虑到我没有点击该死的东西:O

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

希望,它会解决这个bug.

Answer 2

为什么没人提到单个事件来检查被点击的元素？

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

减少事件的发生率更高......

如果您不需要检查整个身体上的点击事件,您可以将事件附加到更近的父元素