如何在 JavaScript 类上正确实现点击事件监听器？

在 JavaScript 中的类上实现点击事件监听器

在 JavaScript 中，事件监听器是处理用户交互的首选方法。当尝试从单击的元素获取属性时，侦听器提供了比使用传统事件处理程序更有效的方法。

在提供的代码片段中：

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

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

问题在于如何 addEventListener被调用。事件监听器函数 myFunction 通过在其后面添加括号 (myFunction()) 立即执行。相反，函数引用本身应该作为第二个参数传递。

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

此外，getElementsByClassName 返回一个节点列表，而不是 HTML 元素。要将事件监听器应用于节点列表中的每个元素，应该迭代它：

var elements = document.getElementsByClassName("classname");

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction);
}

在支持 ES6 的浏览器中，可以使用 forEach 方法实现更简洁的解决方案：

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

通过解决这些调整，代码现在应该使用 JavaScript 事件侦听器正确捕获单击元素的属性，而无需求助于 jQuery 等外部库。

以上是如何在 JavaScript 类上正确实现点击事件监听器？的详细内容。更多信息请关注PHP中文网其他相关文章！