如何在 JavaScript 類別上正確實作點擊事件監聽器？

在 JavaScript 中的類別上實作點擊事件監聽器

在 JavaScript 中，事件監聽器是處理使用者互動的首選方法。當嘗試從單擊的元素取得屬性時，偵聽器提供了比使用傳統事件處理程序更有效的方法。

在提供的程式碼片段中：

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

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

classname.addEventListener('click', myFunction(), false);

問題在於如何 addEventListener被呼叫。事件監聽器函數 myFunction 透過在其後面加上括號 (myFunction()) 立即執行。相反，函數引用本身應該作為第二個參數傳遞。

classname.addEventListener('click', myFunction, false);

此外，getElementsByClassName 傳回一個節點列表，而不是 HTML 元素。要將事件監聽器應用於節點列表中的每個元素，應該迭代它：

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

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

在支援ES6 的瀏覽器中，可以使用forEach 方法實現更簡潔的解決方案：

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

透過解決這些調整，程式碼現在應該使用JavaScript 事件偵聽器正確擷取點擊元素的屬性，而無需求助於jQuery 等外部程式庫。

以上是如何在 JavaScript 類別上正確實作點擊事件監聽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！