使用 JS 为所有具有 Class 的元素添加事件监听器

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

使用 JS 为所有具有 Class 的元素添加事件监听器

作者：迹忆客最近更新：2023/01/18 浏览次数：

向具有类的所有元素添加事件监听器：

使用 document.querySelectorAll() 方法按类选择元素。
使用 forEach() 方法迭代元素集合。
使用 addEventListener() 方法为每个元素添加一个事件侦听器。

以下是本文示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.addEventListener('click', function handleClick(event) {
    console.log('box clicked', event);

    box.setAttribute('style', 'background-color: yellow;');
  });
});

使用 JS 为所有具有 Class 的元素添加事件监听器

我们使用 document.querySelectorAll 方法来选择具有 box 类的所有元素。

querySelectorAll 方法返回一个 NodeList，因此我们可以使用 NodeList.forEach 方法迭代结果。

如果我们使用 document.getElementsByClassName 方法，则必须在调用 forEach() 方法之前将结果转换为数组。

const boxes = Array.from(document.getElementsByClassName('box'));

boxes.forEach(box => {
  box.addEventListener('click', function handleClick(event) {
    console.log('box clicked', event);

    box.setAttribute('style', 'background-color: yellow;');
  });
});

我们对集合中的每个元素调用了 addEventListener 方法。

addEventListener 方法有两个参数：

要侦听的事件类型。如果您需要所有可用事件类型的列表，请查看 MDN 事件列表。
每次触发事件时调用的函数。

每次单击元素并设置元素的样式属性时，都会调用示例中的函数。

另一种但也是非常常见的方法是使用 for...of 循环遍历集合。

const boxes = document.getElementsByClassName('box');

for (const box of boxes) {
  box.addEventListener('click', function handleClick(event) {
    console.log('box clicked', event);
    box.setAttribute('style', 'background-color: yellow;');
  });
}

代码片段实现了相同的结果，但这次我们使用 for...of 循环来迭代元素集合。

如果我们需要选择具有不同类的元素，可以将多个以逗号分隔的选择器传递给 document.querySelectorAll() 方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

const boxes = document.querySelectorAll('.box1, .box2, .box3');

boxes.forEach(box => {
  box.addEventListener('click', function handleClick(event) {
    console.log('box clicked', event);
    box.setAttribute('style', 'background-color: yellow;');
  });
});