类上的 JavaScript 单击事件监听器

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

的详细信息

getElementsByClassName 不返回数组，但在大多数情况下返回 HTMLCollection，在某些浏览器中返回 NodeList (Mozilla ref)。这两种类型都是类数组，(意味着它们具有长度属性并且可以通过它们的索引访问对象)，但不是严格意义上的数组或继承自数组(意味着可以在数组上执行的其他方法不能对这些类型执行)。

感谢用户@Nemo指出这一点并让我深入了解。