JavaScript类单击事件监听器

我目前正在尝试编写一些JavaScript来获取已被点击的类的属性。 我知道要做到这一点正确的方式，我应该使用事件监听器。 我的代码如下：

var classname = document.getElementsByClassName("classname"); var myFunction = function() { var attribute = this.getAttribute("data-myattribute"); alert(attribute); }; classname.addEventListener('click', myFunction(), false); 

每当我点击其中一个类来告诉我这个属性时，我都希望得到一个警告框，但不幸的是这不起作用。 任何人都可以帮忙吗？

（ 注 – 我可以很容易地在jQuery做到这一点，但我不想使用它 ）

Answer 1

这应该工作。 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用户指出这一点，让我深入了解。