如何在 JavaScript 中高效地向具有特定类的元素添加事件监听器？

JavaScript 中类点击的事件监听器

在 JavaScript 中，事件监听器在捕获用户交互方面发挥着至关重要的作用。您可能遇到的任务之一是监听对特定类的元素的点击。

为了确保最佳性能，建议避免使用 jQuery 来实现此目的，而是依赖纯 JavaScript。然而，当尝试为类点击设置事件侦听器时，通常会出现一个问题：代码可能不会触发预期的警报。

问题的根源

问题通常在于getElementsByClassName 的使用不正确。此方法返回一个类数组对象，这意味着它类似于数组，但缺少所有内置数组方法。尝试直接向 getElementsByClassName 的结果添加事件侦听器将无法按预期工作。

快速解决方案

要解决此问题，您可以迭代类似 Array 的对象并添加每个单独元素的事件侦听器：

// Retrieve all elements with the "classname" class
var elements = document.getElementsByClassName("classname");

// Define the event handler function
var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

// Add event listeners to each element
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

或者，如果您有 ES6 支持，则可以使用forEach() 方法来简化代码：

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

附加说明

需要注意的是，支持有限的浏览器，例如 IE6、IE7 和 IE8，可能不支持 getElementsByClassName。在这种情况下，它们将返回未定义。

此外，在使用事件侦听器时，必须考虑事件处理函数的上下文。在提供的代码中，this 指的是被单击的元素。

以上是如何在 JavaScript 中高效地向具有特定类的元素添加事件监听器？的详细内容。更多信息请关注PHP中文网其他相关文章！