如何为所有按钮添加一个事件监听器答案

【问题标题】：How to add one event listener for all buttons如何为所有按钮添加一个事件监听器
【发布时间】：2018-04-05 19:53:51
【问题描述】：

如何将事件侦听器添加到多个按钮并根据单击的按钮获取每个按钮的值。例如：

<button id='but1'>
Button1
</button>
<button id='but2'>
Button2
</button>
<button id='but3'>
Button3
</button>
<button id='but4'>
Button4
</button>

所以在 javascript 上，我不必像这样引用每个按钮：

Const but1 = document.getElementById('but1'); 
but1.addEventListener('click');

【问题讨论】：

标签： javascript

【解决方案1】：

您实际上并不需要为所有按钮添加侦听器。 JS 中有 Bubbling and capturing 这样的东西，所以你可以用 div 包装你所有的 buttons 并捕获那里的所有事件。但请务必检查点击是在 button 上，而不是在 div 上。

const wrapper = document.getElementById('wrapper');

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }

  console.dir(event.target.id);
})

div {
  padding: 20px;
  border: 1px solid black;
}

<div id='wrapper'>
  <button id='but1'>
  Button1
  </button>
  <button id='but2'>
  Button2
  </button>
  <button id='but3'>
  Button3
  </button>
  <button id='but4'>
  Button4
  </button>
</div>

【讨论】：

好的。 div 也可能被点击，然后触发事件监听器，它会调用函数并给出错误的值。
@amaugosomto 你说得对，我忘了这个。但是您只需要检查一种单击的元素，如果它不是按钮则跳过。我更新了答案。

【解决方案2】：

如果按钮没有公共类，可以使用：

button[id^=but]

选择 id 以短语 but 开头的任何按钮，因此它转换为 but*，其中 * 是通配符匹配。

const btns = document.querySelectorAll('button[id^=but]')

btns.forEach(btn => {

   btn.addEventListener('click', event => {
        console.log( event.target.id );
   });

});

<button id='but1'>Button1</button>
<button id='but2'>Button2</button>
<button id='but3'>Button3</button>
<button id='but4'>Button4</button>

【讨论】：

【解决方案3】：

在这种情况下，您可以使用类而不是 id 来抓取每个按钮。

<button class="btn">
Button1
</button>
<button class="btn">
Button2
</button>
<button class="btn">
Button3
</button>
<button class="btn">
Button4
</button>

然后在 JS 中：

const buttons = document.querySelectorAll('.btn')
buttons.forEach(function(currentBtn){
  currentBtn.addEventListener('click', handleEvent)
})

您只需遍历包含所有已找到按钮的 NodeList 的按钮常量。 read about document.querySelectorAll

【讨论】：

【解决方案4】：

与 Lucas 的回答一样，此版本将使用类而不是 ID 来选择每个按钮，并且将使用基本的 for 循环。

<button class="btn">
    Button1
</button>
<button class="btn">
    Button2
</button>
<button class="btn">
    Button3
</button>
<button class="btn">
    Button4
</button>

var buttons = document.querySelectorAll(".btn").length;

for (var i = 0; i < buttons ; i++) {
    document.querySelectorAll(".btn")[i].addEventListener("click", function() {
        alert("Button Clicked");
    });
}

【讨论】：