如何在 JavaScript 中為具有相同類別的多個元素新增事件偵聽器？

為具有相同類別的多個元素添加事件監聽器

在Web 開發中，通常需要使用以下方法向多個元素新增事件監聽器同一個班級。這可以使用 JavaScript 的 querySelectorAll() 方法來實作。

初始問題：

提供的程式碼片段嘗試將事件偵聽器班級新增至所有「刪除」的元素。但是，它僅將偵聽器新增至具有該類別的第一個元素，即使預期行為是將其新增至所有此類元素。

解決方案：

到要解決此問題，需要使用 querySelectorAll() 而不是 querySelector() 來選擇具有「delete」類別的所有元素。 querySelector() 只傳回第一個符合的元素，而 querySelectorAll() 傳回包含所有符合元素的 NodeList。

修改後的程式碼：

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

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

透過此程式碼，成功監聽事件使用「delete」類別新增至每個元素。

其他注意事項：

• 值得注意的是，return false/true 僅對綁定的事件處理程序有用與onclick = function() { ...}。對於 addEventListening，應該使用 event.preventDefault()。
• 使用 ES6 中的 Array.prototype.forEach 迭代可以讓上述 ES5 程式碼更乾淨、更安全：

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

以上是如何在 JavaScript 中為具有相同類別的多個元素新增事件偵聽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！