类上的 JavaScript 单击事件侦听器

javascript dom-events

2022-08-29 23:56:05

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

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

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

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

我本来以为每次我点击其中一个类时都会得到一个警报框，告诉我属性，但不幸的是，这不起作用。任何人都可以帮忙吗？

(注意 - 我可以在jQuery中轻松执行此操作，但我不想使用它)

答案 1

这应该有效。返回与条件匹配的元素的类似 Array 的对象（见下文）。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）不支持，因此它们返回。getElementsByClassNameundefined

有关 getElementsByClassName 的详细信息

getElementsByClassName不返回数组，但在大多数浏览器中返回 a，或在某些浏览器中返回 a （Mozilla ref）。这两种类型都是类似数组的（这意味着它们具有长度属性，对象可以通过其索引进行访问），但不是严格意义上的数组或从数组继承的（这意味着可以在数组上执行的其他方法不能在这些类型上执行）。HTMLCollectionNodeList

感谢用户@Nemo指出这一点，并让我深入挖掘以充分理解。

答案 2

使用现代JavaScript可以像这样完成：

const divs = document.querySelectorAll('.a');

divs.forEach(el => el.addEventListener('click', event => {
  console.log(event.target.getAttribute("data-el"));
}));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
  <style>
    .a {
      background-color:red;
      height: 33px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: pointer;
    }
    
    .b {
      background-color:#00AA00;
      height: 50px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="a" data-el="1">1</div>
  <div class="b" data-el="no-click-handler">2</div>
  <div class="a" data-el="3">11</div>
</body>
</html>

按类名获取所有元素
使用 forEach 在所有元素上循环
在每个元素上附加一个事件侦听器
用于检索特定元素的详细信息event.target