将点击事件添加到 querySelectorAll - JavaScript

您是否曾经在网页上想要将同一组元素绑定一个点击事件，但又不想写点重复的代码？querySelectorAll() 可以帮您！

什么是 querySelectorAll()？

querySelectorAll() 是一个返回与指定 CSS 选择器匹配的所有元素的 NodeList 对象。它的语法如下：

const nodeList = document.querySelectorAll(selector);

其中，selector 是一个 CSS 选择器，如 "div" 或 "#id"。返回值是一个 NodeList 对象，其中列出了匹配的所有元素。

如何向多个元素添加点击事件？

现在假设您有一个 ul 元素包含多个 li 子元素，您想给每个 li 元素添加一个点击事件。您可以使用 querySelectorAll() 将所有 li 元素匹配并存储在 NodeList 中，然后使用 forEach() 来遍历并向每个 li 元素添加一个点击事件。

以下是示例代码：

<!-- HTML -->
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
</ul>

// JavaScript
const liList = document.querySelectorAll('li');

liList.forEach(li => {
  li.addEventListener('click', () => {
    console.log(`您点击了 ${li.innerText} 元素`);
  });
});

以上代码将每个 li 元素绑定一个点击事件。每次单击一个 li 元素时，代码将记录该 li 元素的文本内容。

总结

使用 querySelectorAll() 和 forEach()，您可以向多个元素添加一个点击事件而不必编写重复的代码。

所以，让我们抛弃重复的代码，更好地使用 JavaScript 编程吧！