Javascript 具有多个元素的addEventListener

我开始和他一起工作。 我有两个按钮，当单击其中任何一个按钮时，我希望更改背景色。 但是我的代码不起作用。 这是我的代码：

document.getElementsByTagName（“按钮”）.addEventListener（“单击”，函数）（）{
func（本）
});
函数func（元素）{
element.style.backgroundColor=“灰色”；
}

跟我玩！
跟我玩！

你可以这样或那样做

var-button=document.getElementsByTagName（“按钮”）；
对于（变量i=0；i

跟我玩！
跟我玩！

试试这个

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

设置背景色
设置背景色
函数myFunction（）{
document.body.style.backgroundColor=“红色”；
}

最好的方法是在代码中使用尽可能少的事件侦听器。因此，您可以将一个事件侦听器附加到

区域

div，并基于

event.target

属性进行适当的更改，而不是将事件侦听器附加到每个按钮

运行以下工作代码段：

document.getElementById（'area'）.addEventListener（'click'，函数（事件）{
func（事件目标）；
});
函数func（元素）{
element.style.backgroundColor=“蓝色”；
}

跟我玩！
跟我玩！

我知道这有点离题，但您是否仅限于使用普通javascript？您应该研究jQuery。您可以利用事件委派，将处理程序绑定到按钮的祖先，并引用事件的目标以获得实际单击的按钮。即使没有jQuery，您也可以在几行代码中实现这一点。jQuery是一种浪费，这是一个三行问题！只要使用一个循环，如果你真的想变得更有趣，就为它制作一个帮助函数（说真的，三行）。我写了一个潜在的帮助函数，你可以用它作为另一个问题的答案：我用6行代替3行是为了方便一点，但同样简单的想法。谢谢大家！你所有的建议都很有用！原因是

document.getElementsByTagName

返回一个元素数组

addEventListener

是元素上的方法，而不是数组。因此，您需要遍历所有元素，并对每个元素调用

addEventListener

。从技术上讲，

getElementsByTagName

返回一个实时列表而不是数组。。。在这里没有什么区别，但是如果你在循环中改变元素，活动列表很重要——当你循环时，你从文档中删除的项目也会从数组中神奇地消失！如果你尝试使用数组方法，比如推送或拼接，这也会有所不同。谢谢亲爱的Adarsh Konchady！这是最有用的解决方案