为什么 `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中文网其他相关文章！