addEventListener包含多个元素

Question

我开始使用javascript.我有两个按钮,并且想要在单击这些按钮时更改backgroundColor.但我的代码不起作用.这是我的代码:

document.getElementsByTagName("button").addEventListener("click", function(){
    func(this)
});

function func(element){
    element.style.backgroundColor="gray";
}

<div id="area">
    <button type="button" class="btn" id="btn1">Play With Me!</button>
    <button type="button" class="btn" id="btn2">Play With Me!</button>
</div>

是否有任何方式addEventListener可以使用多个元素？

Answer 1

最好的方法是在代码中尽可能少地使用事件监听器.因此,不是将事件侦听器附加到每个按钮,而是可以将1个单个事件侦听器附加到areadiv,并根据event.target属性进行适当的更改.

运行以下工作代码段:

document.getElementById('area').addEventListener('click', function(event) {
  func(event.target);
});

function func(element) {
  element.style.backgroundColor = "blue";
}

<div id="area">
  <button type="button" class="btn" id="btn1">Play With Me!</button>
  <button type="button" class="btn" id="btn2">Play With Me!</button>
</div>

Answer 2

你可以这样或者DEMO

 var button = document.getElementsByTagName("button");
 for (var i = 0; i < button.length; i++) {
   button[i].addEventListener("click", function() {
     this.style.backgroundColor = "gray";
   });
 }

<div id="area">
  <button type="button" class="btn" id="btn1">Play With Me!</button>
  <button type="button" class="btn" id="btn2">Play With Me!</button>
</div>