类上的 JavaScript 单击事件侦听器

小编典典

类上的 JavaScript 单击事件侦听器

all

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

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

classname.addEventListener('click', myFunction(), false);

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

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

阅读 68

2022-04-20

共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
)。这两种类型都是类数组（意味着它们具有长度属性并且可以通过它们的索引访问对象），但不是严格意义上的数组或继承自数组（意味着可以在数组上执行的其他方法不能在这些类型上执行）。

2022-04-20