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

我有一个JavaScript文件，设置一个EventListener'点击'每个元素与<article>标记。我希望获得事件发生时点击的文章的ID。出于某种原因，我的代码什么都不产生！Javascript单击多个元素的事件监听器，并获取目标ID

我的javascript：

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

为什么不是这方面的工作？顺便说一句，我的文章设置是在窗口加载时调用的一个函数，我知道这是可以肯定的，因为该函数还有其他工具可用。

编辑

所以我修好了我的代码，所以它将循环和监听器添加到每一篇文章元素，现在我得到什么也没有一个警告框。当试图输出不带ID的e.target时，我会收到以下每个元素的消息：

[object HTMLHeadingElement]

有什么建议吗？

ANOTHER编辑

我当前的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

来源

2012-12-15 arielschon12

您没有传递文章对象作为参数重定向。

试试这个（编辑）：

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。

来源

2012-12-15 16:35:43

这是显示的ID，但之前，我甚至点击该项目！我该如何解决这个问题？ – arielschon12

@ arielschon12：我没有得到它你想说什么？你是否说它显示警报，即使没有点击元素。这是不可能的。 –

这正是发生的情况。在页面加载的那一刻，我得到了弹出元素ID的警告框。 – arielschon12

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

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

来源

2012-12-15 14:41:59 sroes

是不是工作以及其他建议？ – arielschon12

是的，我错过了你使用getElementsByTagName的事实。查看我的编辑 – sroes

仍然无法正常工作，我收到一个警告框但没有ID。它简直是空的。 – arielschon12

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>

来源

2012-12-15 14:51:39 gkiely

这帮了很大忙，现在我可以看到一个警告框。问题是，警报框是空的。它没有ID，当我知道我的元素有ID时。这是为什么？ – arielschon12

你的html是什么样的。 – gkiely

我只是散布了一堆文章，这不是重要的一部分。 – arielschon12

-1

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(this.id);

感谢。

来源

2012-12-15 14:59:05

当使用e.id我得到一条消息，说“未定义” – arielschon12

你有任何其他的建议吗？ – arielschon12

然后用this.id代替e.id测试，谢谢。 –

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

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

它更高性能的具有较小的事件..

，如果你不需要检查点击事件的整个身体，你可以在事件附加到一些更接近父元素

来源

2016-03-06 07:52:56 Can

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

回答

相关问题