為什麼 `classname.addEventListener(\'click\', myFunction(), false);` 不能用來新增事件監聽器到類別？

類別的事件監聽器：實用指南

在尋求在點擊時捕獲類別屬性值時，您可能遇到了 JavaScript 程式碼問題。具體來說，行 classname.addEventListener('click', myFunction(), false);無法在元素上註冊事件監聽器。

為了解決這個問題，我們來逐步分析程式碼：

1. getElementsByClassName: 此方法正確選擇元素與指定的類別名稱。但是，它不會傳回數組，而是傳回一個名為 HTMLCollection 的類別數組物件。
2. addEventListener: 此方法採用三個參數： (a) 事件類型（在本例中為「click」） )、(b) 事件偵聽器函數，以及(c ) 捕獲階段（對於冒泡事件通常為false）。在程式碼中，當呼叫 addEventListener 方法時， myFunction() 會立即執行，並將函數呼叫的結果作為事件偵聽器傳遞。這是不正確的。
3. 函數： 匿名函數 myFunction 取得屬性「data-myattribute」並將其顯示在警報框中。這部分程式碼是正確的。

修正的程式碼：

要解決此問題，我們需要將事件偵聽器正確附加到 getElementsByClassName 傳回的每個元素。這是修正後的程式碼：

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

修正說明：

1. 類別陣列物件： 我們將HTMLCollection 儲存在元素可變以求更好用法。
2. 循環：為了將偵聽器附加到每個元素，我們使用循環迭代元素類數組物件。
3. EventListener：使用新增事件偵聽器的正確語法，將myFunction 作為

在ES6 中，可以更簡潔地實現循環和事件監聽器新增：

Array.from(elements).forEach(function(element) {
  element.addEventListener('click', myFunction);
});

對於較舊的瀏覽器，如IE6-8，請考慮檢查是否存在使用前先取得ElementsByClassName。

以上是為什麼 `classname.addEventListener(\'click\', myFunction(), false);` 不能用來新增事件監聽器到類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！