如何在 JavaScript 中处理具有相同类的多个元素的事件？

具有公共类的元素的事件处理

在 Web 应用程序中，向具有相同类的多个元素添加事件侦听器可能是一项常见任务。这允许在相似元素之间实现标准化行为，例如删除的确认提示。

使用 querySelector 的初始方法

考虑以下 JavaScript 代码，旨在向具有该类的所有元素添加单击事件侦听器"delete":

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

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

虽然此代码使用“delete”类初始化一个元素的事件侦听器，但它失败为所有此类元素注册侦听器。此限制是由于使用 querySelector 引起的，它仅返回第一个匹配元素。

使用 querySelectorAll 的解决方案

要将事件侦听扩展到多个元素，应使用 querySelectorAll。此方法返回一个 NodeList 对象，其中包含具有指定类的所有元素。以下代码片段说明了这一点：

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

迭代和添加事件监听器

有了 NodeList，您现在可以迭代其元素并单独添加事件监听器：

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

事件预防处理

一项调整是仅在确认为 false 时防止默认行为。以前，使用返回 true，但 event.preventDefault() 是事件侦听器上下文中的正确方法。

演示和扩展选项

可以在以下位置找到此解决方案的工作演示：http://jsfiddle.net/Rc7jL/3/。

此外，请注意存在 ES6 版本，它利用Array.prototype.forEach 迭代和模板字符串以提高代码可读性。

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