问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

类上的 JavaScript 单击事件侦听器

社区维基
1
新手上路，请多包涵

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

我的代码如下：

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

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

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

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

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

原文由 30secondstosam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptdom-events
阅读 750
2 个回答
得票最新
社区维基
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 的详细信息

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

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

原文由 Anudeep Bulla 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

使用现代 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>
  1. 按类名获取所有元素
  2. 使用 forEach 遍历所有元素
  3. 在每个元素上附加一个事件监听器
  4. 使用 event.target 检索特定元素的更多信息

原文由 V. Sambor 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题