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

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

您实际上并不需要为所有按钮添加监听器。 JS中有这样的东西Bubbling and capturing所以你可以包装你所有的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>