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

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

- amaugo somto

Answer 1

你不需要给所有的按钮都添加监听器。在JS中有事件冒泡和捕获，因此可以将所有的按钮包装在一个div中，然后在那里捕捉所有的事件。但请确保检查点击是否发生在按钮上，而不是在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>

- Aliaksandr Sushkevich

---

好的。div元素也可能被点击，这将触发事件监听器，调用函数并给出错误的值。 - amaugo somto

@amaugosomto 你说得对，我忘了这一点。但是你只需要检查所点击元素的类型，如果不是按钮就跳过即可。我已经更新了答案。 - Aliaksandr Sushkevich

Answer 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>

- Adam Azad

Answer 3

在这种情况下，你可以使用 class 而不是 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的信息。

- Lucas David Ferrero

Answer 4

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

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

The JS

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

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

- Scott Strauss