使用 JS 为所有具有 Class 的元素添加事件监听器
向具有类的所有元素添加事件监听器：
-
使用
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;');
});
});
我们使用 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;');
});
});
我们将多个以逗号分隔的选择器传递给 querySelectorAll 方法，以获取具有类 box1 、box2 和 box3 的 DOM 元素的集合。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
