类上的JavaScript click事件监听器

Question

我目前正在尝试编写一些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 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继承。（这意味着不能对这些类型执行在数组上可以执行的其他方法）