小编典典

类上的JavaScript click事件监听器

javascript

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

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

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

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

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

- 我可以很容易地做到这一点jQuery,但我 喜欢使用它


阅读 278

收藏
2020-04-25

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

2020-04-25