类上的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);

我希望每次点击其中一个类时都有一个警告框来告诉我该属性，但不幸的是，这并不起作用。有人能帮忙吗？

Answer 1

这应该管用。GetElementsByClassName返回符合条件的元素的 Array 类数组对象（请参见编辑）。

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);
    });

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