如何向具有相同类的多个元素添加点击事件监听器？

向具有相同类的元素添加点击事件侦听器

在这种情况下，您有一个用于删除 ID 的列表视图，并且想要添加对所有具有“删除”类的元素的确认警报。但是，您遇到了一个问题，似乎只有该类的第一个元素才能接收侦听器。

解决方案

要解决此问题，您需要使用 querySelectorAll而不是查询选择器。 querySelectorAll 返回一个包含指定类的所有元素的 NodeList：

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

现在，您可以迭代 NodeList 并向每个元素添加事件监听器：

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

此外，仅阻止如果用户未确认删除，则执行默认操作。这确保只有在用户明确选择继续时才会执行删除。

ES6 增强

使用 ES6，您可以使用 Array.prototype.forEach 简化循环:

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

此版本使用模板字符串（ES2015 中引入）以获得更清晰的语法。

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