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

Javascript click event listener on multiple elements and get target ID(Javascript 在多个元素上单击事件侦听器并获取目标 ID)

问题描述

我有一个 javascript 文件，它在每个带有 <article> 标记的元素上设置一个点击"的 EventListener.我想在事件触发时获取点击的文章的 ID.出于某种原因，我的代码什么也没有产生！

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:

My 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.

编辑

所以我修复了我的代码，让它循环并将侦听器添加到每个文章元素，现在我得到一个警告框，里面什么都没有.当尝试输出没有 ID 的 e.target 时，我收到每个元素的以下消息:

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:

[object HTMLHeadingElement]

有什么建议吗?

另一个编辑

我当前的 javascript 代码:

My current javascript code:

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

This is showing my alert boxes when the page finished loading, without considering that i haven't clicked a damn thing :O

推荐答案

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

You are not passing an article object to redirect as a parameter.

试试这个(编辑):

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.

这篇关于Javascript 在多个元素上单击事件侦听器并获取目标 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！