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

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

要将单击事件侦听器添加到具有特定类的所有元素，您可以可以使用 querySelectorAll() 方法代替 querySelector()。 querySelector() 方法返回第一个匹配元素，而 querySelectorAll() 返回所有匹配元素的 NodeList。

解决方案：

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

现在你有所有删除链接的 NodeList，您可以循环遍历它们并向每个删除链接添加一个事件侦听器one.

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();
        }
    });
}

在事件监听器中，可以使用 this 关键字来引用当前元素。这允许您访问元素的标题属性并向用户显示一条确认消息。

注意：使用 event.preventDefault() 来阻止默认操作非常重要如果用户确认删除，链接就会发生。

ES6版本：

使用ES6，可以使用forEach()方法简化代码：

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

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