如何在 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中文網其他相關文章！