具有多个元素的 addEventListener

addEventListener with multiple elements

本文关键字：addEventListener 元素更新时间：2023-09-26

我开始使用javascript。我有两个按钮，想要在单击这些按钮中的任何一个时更改背景颜色。但是我的代码不起作用。这是我的代码：

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处理多个元素？

最好的方法是在代码中使用尽可能少的事件侦听器。因此，您可以将 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>

你可以这样做或演示

 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>

试试这个

<button type="button" onclick="myFunction()">Set background color</button>
<button type="button" onclick="myFunction()">Set background color</button>
<script>
function myFunction() {
    document.body.style.backgroundColor = "red";
}
</script>

没有找到相关文章