Question

如何获取类中的每个按钮并向其添加事件侦听器？

类似的东西：

var item = document.getElementsByClassName("holder").getElementsByTagName("button");

Array.from(item).forEach(function(element) {
  element.addEventListener('click', () => {
    console.log('a');
  }, false);
});

<div class="holder">
  <button>click me</button>
</div>
<div class="holder">
  <button>click me</button>
</div>

Answer 1

您可以使用document.querySelectorAll返回可迭代列表。

您的以下呼叫document.getElementsByClassName("holder")将返回元素列表，您必须遍历该列表才能访问该按钮的调用。

我将事件参数添加到侦听器，以便您可以跟踪单击的目标按钮。

＆＃13;

document.querySelectorAll('.holder button').forEach(button => {
  button.addEventListener('click', (e) => {
    console.log('Button: ' + e.target.name);
  }, false);
});

＆＃13;

<div class="holder">
  <button name="button-1">click me</button>
</div>
<div class="holder">
  <button name="button-2">click me</button>
</div>

＆＃13;

有关详细信息，请查看：

Answer 2

虽然你可以而且你应该用querySelectorAll来做。在这里，我只想用getElementsByClassName和firstElementChild

发布另一种方法

var classname = document.getElementsByClassName("holder");
var yourFunction = function() {
    console.log(this);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].firstElementChild.addEventListener('click', yourFunction, false);
}

<div class="holder">
    <button>click me</button>
</div>
<div class="holder">
    <button>click me</button>
</div>

firstElementChild ：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/firstElementChild

Answer 3

您可以使用document.querySelectorAll()：

轻松完成

＆＃13;

var item = document.querySelectorAll(".holder button");

Array.from(item).forEach(function(element) {
  element.addEventListener('click', function(e) {
    console.log('a');
  }, false);
});

＆＃13;

<div class="holder">
  <button>click me</button>
</div>
<div class="holder">
  <button>click me</button>
</div>

＆＃13;

有关文档，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll。

原始代码不起作用的原因是因为getElementsByClassName本身返回一个列表，因此你不能直接调用它上面的getElementsByTagName - 你必须循环遍历第一个结果呼叫。但是上面的方法很简单。

Answer 4

如果你获得了holder类的所有元素，它将返回一个集合，你无法在其上执行getElementsByTagName。然而，您可以迭代持有者并映射它们：

 for(const holder of document.getElementsByClassName("holder")) {
   for(const button of holder.getElementsByTagName("button")) {
      button.onclick = /*...*/;
   }
 }

如果使用一些花哨的css选择器，甚至更简单：

 for(const button of document.querySelectorAll(".holder > button"))

Answer 5

试试这个：

 <div class="holder">
  <button>click me</button>
</div>
<div class="holder">
  <button>click me</button>
</div>


var items = document.getElementsByClassName("holder");

 for(const item of document.getElementsByClassName("holder")) {
 item.getElementsByTagName("button")[0].addEventListener('click', () => {
        console.log('a');
      }, false);
    }

在一个类中获取一个元素？

5 个答案: