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上。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

button[id^=but]

要选择ID为以but开头的任何按钮，请将其转换为but*，其中*为wildmatch。

＆＃13;

const btns = document.querySelectorAll('button[id^=but]')

btns.forEach(btn => {

   btn.addEventListener('click', event => {
        console.log( event.target.id );
   });

});

＆＃13;

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

＆＃13;

Answer 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

Answer 4

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

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

JS

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

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

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

4 个答案: