如何在 JavaScript 中有效地向具有特定類別的元素添加事件監聽器？

JavaScript 中類別點擊的事件監聽器

在 JavaScript 中，事件監聽器在捕捉使用者互動方面發揮著至關重要的作用。您可能遇到的任務之一是監聽對特定類別的元素的點擊。

為了確保最佳效能，建議避免使用 jQuery 來實現此目的，而是依賴純 JavaScript。然而，當嘗試為類別點擊設定事件偵聽器時，通常會出現一個問題：程式碼可能不會觸發預期的警報。

問題的根源

問題通常在於getElementsByClassName 的使用不正確。此方法傳回一個類別數組對象，這意味著它類似於數組，但缺少所有內建數組方法。嘗試直接向 getElementsByClassName 的結果新增事件偵聽器將無法如預期般運作。

快速解決方案

要解決此問題，您可以迭代類似Array 的物件並添加每個單獨元素的事件偵聽器：

或者，如果您有ES6 支持，則可以使用forEach()方法來簡化程式碼：

附加說明

需要注意的是，支援有限的瀏覽器，例如 IE6、IE7 和 IE8，可能不支援 getElementsByClassName。在這種情況下，它們將返回未定義。

此外，在使用事件偵聽器時，必須考慮事件處理函數的上下文。在提供的程式碼中，this 指的是被點選的元素。

以上是如何在 JavaScript 中有效地向具有特定類別的元素添加事件監聽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！