JavaScript类单击事件监听器
我目前正在尝试编写一些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 classname = document.getElementsByClassName("classname"); var myFunction = function() { var attribute = this.getAttribute("data-myattribute"); alert(attribute); }; for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', myFunction, false); }
jQuery为你做了循环部分,你需要在普通的JavaScript中做。
如果你有ES6支持,你可以用你的最后一行代替:
Array.from(classname).forEach(function(element) { element.addEventListener('click', myFunction); });
注意:较旧的浏览器(如IE6,IE7,IE8)不支持getElementsByClassName
,因此它们返回undefined
。
编辑:更正
getElementsByClassName
并不返回一个数组,而是一个HTMLCollection,或者一个NodeList是一些浏览器( Mozilla ref )。 这两种types都是类似于数组的(意味着它们具有长度属性,并且可以通过它们的索引来访问这些对象),但这些types不是严格意义上的Array或从Arrayinheritance的。 (意味着可以对数组执行的其他方法不能在这些types上执行)
感谢@ Nemo用户指出这一点,让我深入了解。