如何为所有按钮添加一个事件侦听器

Question

如何向多个按钮添加事件侦听器,并根据单击的按钮获取每个按钮的值.例如:

<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');

Answer 1

如果按钮没有通用类，您可以使用：

button[id^=but]

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

button[id^=but]

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

btns.forEach(btn => {

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

});

Answer 2

在这种情况下，您可以使用类而不是 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 的按钮常量。 阅读关于 document.querySelectorAll

Answer 3

您实际上不需要为所有按钮添加侦听器.有一个在JS这样的事情冒泡和捕捉所以你可以用你所有的buttons用div和捕获所有的事件出现.但请确保检查点击是否在,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>