addEventListener不适用于多个链接
[英]addEventListener not working for multiple links
问题描述
I am new to javascript, and am having trouble making a click event handler working on multiple links. 
我是javascript新手，无法在多个链接上使用click事件处理程序。 My code is given below: 我的代码如下：
<body>
<ul id="test">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
</ul>
</body>
and the JS code: 和JS代码：
document.querySelector("a").addEventListener("click", function() {
alert("Hello world");
});
The event works fine for the "First" link, but not for the second. 该事件适用于“第一个”链接，但不适用于第二个链接。 Any ideas where I am going wrong. 任何想法，我要去哪里错了。 FIDDLE 小提琴
4 个解决方案
解决方案1
4 2016-06-04 11:18:16
You need to use querySelectorAll() to select every a and then use for loop because it returns NodeList 您需要使用querySelectorAll()选择每个a ，然后使用for循环，因为它返回NodeList
var a = document.querySelectorAll("a"); for (var i = 0; i < a.length; i++) { a[i].addEventListener("click", function() { alert("Hello world"); }); }
<ul id="test"> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> </ul>
解决方案2
2 2016-06-04 11:18:41
Method querySelector() only select single element, instead use querySelectorAll() and bind click event handler using iterator. 方法querySelector()仅选择单个元素，而是使用querySelectorAll()并使用迭代器绑定单击事件处理程序。
// convert NodeList to Array and then iterate using forEach method Array.from(document.querySelectorAll("a")).forEach(function(ele) { ele.addEventListener("click", function() { alert("Hello world"); }) });
<body> <ul id="test"> <li><a href="#">First</a> </li> <li><a href="#">Second</a> </li> </ul> </body>
解决方案3
2 已采纳 2016-06-04 11:26:03
Use this for the JS: 将此用于JS：
var links = document.getElementById("test"); links.addEventListener("click", function() { alert("Hello world"); });
<body> <ul id="test"> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> </ul> </body>
解决方案4
0 2016-06-04 11:31:44
Use querySelectorAll in place of querySelector and which will return an array and loop it through in foreach and add event listener to all. 使用querySelectorAll代替querySelector，它将返回一个数组并在foreach中循环通过，并向所有事件添加侦听器。
var links = document.querySelectorAll("a");
Array.from(links).forEach(function(e) {
e.addEventListener("click", function() {
alert("clicked");
})
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.