类上的JavaScript click事件监听器
我目前正在尝试编写一些JavaScript,以获取已单击的类的属性。我知道要以正确的方式执行此操作,应该使用事件侦听器。我的代码如下:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
我希望每次单击其中一个类来告诉我该属性时,都会得到一个警告框,但是不幸的是,这不起作用。有人可以帮忙吗?
( 注 - 我可以很容易地做到这一点jQuery
,但我 不 喜欢使用它)
-
这应该工作。
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); }
jQuery为您完成了循环部分,您需要使用纯JavaScript来完成。
如果您有 ES6支持 ,则可以将最后一行替换为:
Array.from(elements).forEach(function(element) { element.addEventListener('click', myFunction); });
注意:较旧的浏览器(如IE6,IE7,IE8)不支持
getElementsByClassName
,因此会返回undefined
。
编辑:更正
getElementsByClassName
不会返回数组,而是返回大多数HTMLCollection或某些浏览器中的NodeList(Mozilla
ref)。这两种类型都是Array-Like,(意味着它们具有length属性,并且可以通过其索引访问对象),但是它们并不是严格意义上的Array或从Array继承。(这意味着不能对这些类型执行在数组上可以执行的其他方法)
-
JavaScript自定义事件监听器
2021-02-02 关注 0 浏览97 1答案
-
重新启动事件监听器javascript / jquery
2021-01-31 关注 0 浏览151 1答案
-
在卸载React上删除事件监听器
2021-01-31 关注 0 浏览151 1答案
-
删除匿名事件监听器
2021-02-02 关注 0 浏览65 1答案
-
Zookeeper Watcher(事件监听器)?
2020-11-26 关注 0 浏览714 1答案
-
SQLAlchemy Mixins /和事件监听器
2021-01-29 关注 0 浏览100 1答案
-
什么是被动事件监听器?
2021-02-02 关注 0 浏览181 1答案
-
什么是被动事件监听器?
2022-05-26 关注 0 浏览17 1答案
-
AngularJS - $destroy 是否删除事件监听器?
2022-07-28 关注 0 浏览15 1答案
-
Android自定义事件监听器
2021-01-29 关注 0 浏览805 1答案