首页 > web前端 > js教程 > 如何在 JavaScript 类上正确实现点击事件监听器?

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

Mary-Kate Olsen
发布: 2024-12-02 12:31:15
原创
574 人浏览过

How to Correctly Implement a Click Event Listener on a JavaScript Class?

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板