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與多個元素

回答

相關問題