JavaScript单击类上的事件侦听器

Question

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参考文献)。这两种类型都类似于数组(这意味着它们有一个Length属性，并且可以通过它们的索引访问对象)，但是严格来说，它们不是Array，也不是从Array继承的。(这意味着不能对这些类型执行其他可以在Array上执行的方法)