Question

我有一个javascript文件，在<article>标记的每个元素上设置一个'click'的EventListener。我希望在事件触发时获取文章的id。出于某种原因，我的代码什么也没产生！

我的javascript：

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

为什么这不起作用？顺便说一句，我的文章设置是在窗口加载时调用的函数，我知道这肯定是有效的，因为该函数还有其他功能。

修改

所以我修复了我的代码，所以它会循环并将监听器添加到每个文章元素，现在我得到一个没有任何内容的警告框。当尝试输出没有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);
}

希望，它会解决这个问题。

Answer 2

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

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

它可以减少事件的发生..

如果您不需要检查整个机构的点击事件，您可以将事件附加到更近的父元素

Answer 3

您正在执行重定向功能而不是传递引用，请尝试：

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

修改此外，getElementsByTagName返回一个包含文章的数组，因此您必须遍历它们并在每个文章上调用addEventListener。

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 4

getElementsByTagName返回节点列表。然后，您可以使用for循环向每个元素添加一个eventlistener。

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

这个迷你javascript库（1.3 KB）可以做所有这些事情

https://github.com/Norair1997/norjs/

nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);

这个插件可以处理这些东西和更多

Answer 6

articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did.

如果不起作用，请尝试使用e.id而不是e.target.id在alert中，如下所示：

   alert(this.id);

感谢。

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

6 个答案: