如何在 JavaScript 中向具有相同类的多个元素添加事件侦听器？

向具有相同类的多个元素添加事件监听器

在 Web 开发中，通常需要使用以下方法向多个元素添加事件监听器同一个班级。这可以使用 JavaScript 的 querySelectorAll() 方法来实现。

初始问题：

提供的代码片段尝试向所有带有“删除”的元素添加事件侦听器班级。但是，它仅将侦听器添加到具有该类的第一个元素，即使预期行为是将其添加到所有此类元素。

解决方案：

到要解决此问题，需要使用 querySelectorAll() 而不是 querySelector() 来选择具有“delete”类的所有元素。 querySelector() 只返回第一个匹配的元素，而 querySelectorAll() 返回包含所有匹配元素的 NodeList。

修改后的代码：

var deleteLinks = document.querySelectorAll('.delete');

for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

通过此代码，成功监听事件使用“delete”类添加到每个元素。

其他注意事项：

• 值得注意的是，return false/true 仅对绑定的事件处理程序有用与 onclick = function() {...}。对于 addEventListening，应该使用 event.preventDefault()。
• 使用 ES6 中的 Array.prototype.forEach 迭代可以使上述 ES5 代码更干净、更安全：

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

以上是如何在 JavaScript 中向具有相同类的多个元素添加事件侦听器？的详细内容。更多信息请关注PHP中文网其他相关文章！