如何在 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中文网其他相关文章！