将事件句柄同时附加到多个元素

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。