Question

我是javascript的新手，在点击事件处理程序处理多个链接时遇到问题。我的代码如下：

<body>
    <ul id="test">
        <li><a href="#">First</a></li>
        <li><a href="#">Second</a></li>
    </ul>
</body>

和JS代码：

document.querySelector("a").addEventListener("click", function() {
    alert("Hello world");
});

该活动适用于＆＃34; First＆＃34;链接，但不是第二个。我出错的任何想法。 FIDDLE

Answer 1

您需要使用querySelectorAll()选择每个a，然后使用for循环，因为它会返回NodeList

＆＃13;

var a = document.querySelectorAll("a");
for (var i = 0; i < a.length; i++) {
  a[i].addEventListener("click", function() {
    alert("Hello world");
  });
}

＆＃13;

<ul id="test">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
</ul>

＆＃13;

Answer 2

方法 querySelector() 只选择单个元素，而是使用 querySelectorAll() 并使用迭代器绑定click事件处理程序。

＆＃13;

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

＆＃13;

<body>
  <ul id="test">
    <li><a href="#">First</a>
    </li>
    <li><a href="#">Second</a>
    </li>
  </ul>
</body>

＆＃13;

Answer 3

将此用于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>

Answer 4

使用querySelectorAll代替querySelector，它将返回一个数组并在foreach中循环，并向所有人添加事件监听器。

var links = document.querySelectorAll("a");
Array.from(links).forEach(function(e) {
    e.addEventListener("click", function() {
    alert("clicked");
   })
});

addEventListener不适用于多个链接

4 个答案: