如何在 JavaScript 中將點擊事件偵聽器正確附加到具有相同類別的多個元素？

類別上點擊事件監聽器

要將點擊事件監聽器附加到類，可以使用 addEventListener() 方法。此方法採用三個參數：

• 事件類型（例如，「點擊」）
• 偵聽器函數
• 可選的捕捉標誌（通常為false ）

在您的範例中，您正確使用了addEventListener() 方法。但是，有兩個問題：

1。元素選擇錯誤

您正在使用document.getElementsByClassName("classname") 選擇類別元素，它傳回HTMLCollection 或NodeList （取決於瀏覽器） 。這些不是數組，因此您不能使用數組括號表示法直接將事件偵聽器附加到每個類別元素。

2.事件偵聽器函數錯誤

在事件偵聽器函數中，您在將其附加到類別元素時呼叫它。這表示新增監聽器後函數會立即執行。相反，您應該傳入函數作為引用而不調用它：

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

更正的代碼

這是更正的代碼：

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

此程式碼現在將正確地向每個類別元素添加事件偵聽器，並在單擊該元素時觸發提供的函數，顯示該元素的警報中的data-myattribute 屬性值。

以上是如何在 JavaScript 中將點擊事件偵聽器正確附加到具有相同類別的多個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！