Javascript 多个元素上的Javascript单击事件侦听器并获取目标ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13893138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript click event listener on multiple elements and get target ID
提问by arielschon12
I have a javascript file that sets an EventListener of 'click' on every element with the <article>tag. I want to get the id of the article clicked when the event fires. For some reason, my code produces nothing!
我有一个 javascript 文件，它在每个带有<article>标签的元素上设置了一个“点击”的 EventListener 。我想在事件触发时获得点击的文章的 id。出于某种原因，我的代码什么也没产生！
My javascript:
我的javascript：
articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect(e),false);
function redirect(e){
alert(e.target.id);
}
Why isn't this working? BTW my article setup is in a function called when the window is loaded, and i know that works for sure because that function has other stuff that work.
为什么这不起作用？顺便说一句，我的文章设置在加载窗口时调用的函数中，我知道这肯定有效，因为该函数还有其他可用的东西。
EDIT
编辑
So i fixed my code so it will loop and add the listener to every article element, and now i get an alert box with nothing in it. When trying to output the e.target without the ID, i get the following message for every element:
所以我修复了我的代码，这样它就会循环并将监听器添加到每个文章元素，现在我得到一个没有任何内容的警报框。当尝试输出没有 ID 的 e.target 时，我收到每个元素的以下消息：
[object HTMLHeadingElement]
Any suggestions?
有什么建议？
ANOTHER EDIT
另一个编辑
My current javascript code:
我当前的 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);
This is showing my alert boxes when the page finished loading, without considering that i haven't clicked a damn thing :O
这是在页面加载完成时显示我的警告框，而没有考虑到我没有点击该死的东西：O
回答by Mohit Pandey
You are not passing an article object to redirect as a parameter.
您没有将文章对象作为参数传递给重定向。
Try this (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, it will solve the bug.
希望，它会解决这个错误。
回答by Can Rau
Why is nobody mentioning a single event which checks for the clicked element?
为什么没有人提到检查单击元素的单个事件？
document.body.addEventListener('click', function(e) {
var target = e.target;
if (target.nodeName === 'article') {
// do whatever you like ;-)
}
e.stopPropagation()
});
it's more performant to have less events..
事件越少性能越好..
if you don't need to check for click events on the whole body you could attach the event to some closer parent element
如果您不需要检查整个身体上的点击事件，您可以将事件附加到一些更近的父元素
回答by sroes
You are executing the redirect function instead of passing the reference, try this:
您正在执行重定向函数而不是传递引用，试试这个：
articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect,false);
function redirect(e){
alert(e.target.id);
}
Edit:Also, getElementsByTagName returns an array with articles, so you have to loop through them and call addEventListener on each one of them.
编辑：此外， 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);
}
回答by gkiely
getElementsByTagNamereturns a nodelist. You can then add an eventlistener to each one of those elements with a for loop.
getElementsByTagName返回一个节点列表。然后，您可以使用 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>
回答by Norair
This mini javascript libary (1.3 KB) can do all these things
这个迷你 javascript 库 (1.3 KB) 可以做所有这些事情
https://github.com/Norair1997/norjs/
https://github.com/Norair1997/norjs/
nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);
This plugin can handle such stuff and more
这个插件可以处理这样的东西等等
回答by Rashedul.Rubel
articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did.
if does not work then try by e.id instead of e.target.id inside alert as below:
如果不起作用，请尝试在警报中使用 e.id 而不是 e.target.id ，如下所示：
alert(this.id);
Thanks.
谢谢。
