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

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

最佳答案

您实际上不需要将监听器添加到所有按钮。 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>

10-06 03:41
查看更多