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用户指出这一点,让我深入了解。