类上的 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感谢您指出这一点并让我深入理解。