將事件句柄同時附加到多個元素

Question

我想將「單擊」事件附加到div內的所有按鈕。除此之外：

var div1 = document.getElementById("div1"); 
var elements = div1.getElementsByTagName('button'); 
for(var i = 0, len = elements.length; i < len; i++) { 
    elements[i].onclick = function() { 
     // stuff 
    } 
} 

有沒有更好的方法將「onclick」函數處理函數一次添加到純js中的所有按鈕？

Answer 1

爲了減少代碼，您可以定義一個clickHandler函數並將此函數附加到所有按鈕。

div1.getElementsByTagName（ '按鈕'）的結果是HTMLCollection而不是陣列。爲了利用Array.forEach語法，您可以使用call。

的例子：

var clickHandler = function (e) { 
 
    console.log(this.textContent); 
 
}; 
 

 
var div1 = document.getElementById("div1"); 
 
var elements = div1.getElementsByTagName('button'); 
 
Array.prototype.forEach.call(elements, function(ele) { 
 
    ele.onclick = clickHandler 
 
});

<div id="div1"> 
 
    <button type="button">Button 1</button> 
 
    <button type="button">Button 2</button> 
 
    <button type="button">Button 3</button> 
 
    <button type="button">Button 4</button> 
 
</div>

如果你可以使用Arrow Functions，他們只在ES6支持，您可以集成更多的代碼：

var clickHandler = function (e) { 
 
    console.log(this.textContent); 
 
}; 
 

 
var div1 = document.getElementById("div1"); 
 
var elements = div1.getElementsByTagName('button'); 
 
Array.prototype.forEach.call(elements, (ele) => {ele.onclick = clickHandler;});

<div id="div1"> 
 
    <button type="button">Button 1</button> 
 
    <button type="button">Button 2</button> 
 
    <button type="button">Button 3</button> 
 
    <button type="button">Button 4</button> 
 
</div>

Answer 2

正如評論中所述，您可以使用event delegation。在這種情況下，將單個事件處理程序添加到要處理的元素的共同祖先。在處理程序中，檢查事件發生的元素，如果它是應該處理的事件之一，則會執行實際的事件處理程序邏輯。

你的情況可能是這樣的：

var div1 = document.getElementById('div1'); 
div1.onclick = function(event) { 
    if (event.target.nodeName.toLowerCase() !== 'button') { 
    return; 
    } 
    // stuff 
}; 

注意的是，在事件系統有不同瀏覽器之間，尤其是老年人的IE版本。如果你想支持這些版本，你將不得不處理這個問題。您可能還想考慮使用addEventListener而不是onclick。