addEventListener与多个元素

我开始使用javascript。我有两个按钮，并希望更改backgroundColor当点击这些按钮中的任何一个。但我的代码不起作用。这是我的代码：addEventListener与多个元素

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作品有多个元素呢？

来源

2016-04-22 MO30 Qari

我知道这是有点偏离主题，但你有限的香草JavaScript的？你应该看看jQuery。 – Glubus

您可以利用事件委托，将您的处理程序绑定到按钮的祖先，并引用事件的目标以获取被单击的实际按钮。即使没有jQuery，您也可以通过几行代码实现此目的。 –

jQuery是如此浪费，这是一个三线问题！只要使用一个循环，如果你想变得很花哨，为它做一个辅助函数（严重的是三行）。 –

，最好的办法是让在你的代码的几个事件侦听器成为可能。因此，不要将事件侦听器附加到每个按钮，您可以将1个单个事件侦听器附加到area div，并根据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>

来源

2016-04-22 15:19:04

谢谢亲爱的Adarsh Konchady！这是最有用的解决方案 –

你可以做这样或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>

来源

2016-04-22 15:12:26

原因是'document.getElementsByTagName'返回一个元素数组。 'addEventListener'是一个元素上的方法，而不是数组。所以你需要遍历它们并在每一个上调用'addEventListener'。 –

从技术上讲，'getElementsByTagName'返回一个实时列表而不是数组......它在这里没有什么区别，但是如果你改变循环内的元素，实况列表很重要 - 你从文件中移除的项目也会神奇地从阵列中消失，就像循环它一样！ –

如果您尝试使用数组方法（如push或splice），它也会有所帮助。 – Quentin

-1

试试这个

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

来源

2016-04-22 15:13:57

addEventListener与多个元素

回答

相关问题