JavaScript上的Click click事件监听器 [英] JavaScript click event listener on class

问题描述

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

I'm currently trying to write some JavaScript to get the attribute of the class that has been clicked. I know that to do this the correct way, I should use an event listener. My code is as follows:

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

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

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

我每次点击其中一个课程时都希望得到一个警告框告诉我属性，但遗憾的是这不起作用。任何人都可以帮忙吗？

I was expecting to get an alert box every time I clicked on one of the classes to tell me the attribute but unfortunately this does not work. Can anyone help please?

（注意 - 我可以很容易地在 jQuery中执行此操作但我不喜欢用它）

(Note - I can quite easily do this in jQuery but I would NOT like to use it)

推荐答案

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

This should work. getElementsByClassName returns an array Array-like object(see edit) of the elements matching the criteria.

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

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

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

jQuery为您做循环部分，您需要在纯JavaScript中执行此操作。

jQuery does the looping part for you, which you need to do in plain JavaScript.

如果你有 ES6支持，你可以用以下代码替换你的最后一行：

If you have ES6 support you can replace your last line with:

    Array.from(classname).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

注意：较旧的浏览器（如IE6，IE7，IE8）不支持 getElementsByClassName 所以他们返回 undefined 。

Note: Older browsers (like IE6, IE7, IE8) don´t support getElementsByClassName and so they return undefined.

编辑：更正

getElementsByClassName 不返回数组，但是HTMLCollection在大多数情况下，或NodeList是一些浏览器（ Mozilla ref ）。这两种类型都是Array-Like，（意味着它们具有length属性，并且可以通过索引访问对象），但严格来说不是Array或从Array继承。 （意味着无法在这些类型上执行可在阵列上执行的其他方法）

getElementsByClassName doesnt return an array, but a HTMLCollection in most, or a NodeList is some browsers (Mozilla ref). Both of these types are Array-Like, (meaning that they have a length property and the objects can be accessed via their index), but are not strictly an Array or inherited from an Array. (meaning other methods that can be performed on an Array cannot be performed on these types)

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

Thanks to user @Nemo for pointing this out and having me dig in to fully understand.

这篇关于JavaScript上的Click click事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！