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