Javascript 一次将事件句柄附加到多个元素

我想将“单击”事件附加到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
    }
}

var div1=document.getElementById（“div1”）；
var elements=div1.getElementsByTagName（'button'）；
for（var i=0，len=elements.length；i

---

在纯js中，是否有更好的方法将“onclick”函数处理程序一次附加到所有按钮？

为了减少代码，您可以定义clickHandler函数并将此函数附加到所有按钮

div1.getElementsByTagName（'button'）的结果是一个数组，而不是一个数组。为了利用Array.forEach语法，您可以使用

例如：

var clickHandler=函数（e）{
console.log（this.textContent）；
};
var div1=document.getElementById（“div1”）；
var elements=div1.getElementsByTagName（'button'）；
Array.prototype.forEach.call（元素、函数（ele））{
ele.onclick=clickHandler
});

按钮1
按钮2
按钮3
按钮4
为了减少代码，您可以定义clickHandler函数并将此函数附加到所有按钮

div1.getElementsByTagName（'button'）的结果是一个数组，而不是一个数组。为了利用Array.forEach语法，您可以使用

例如：


var clickHandler=函数（e）{
console.log（this.textContent）；
};
var div1=document.getElementById（“div1”）；
var elements=div1.getElementsByTagName（'button'）；
Array.prototype.forEach.call（元素、函数（ele））{
ele.onclick=clickHandler
});

按钮1
按钮2
按钮3
按钮4
如评论中所述，您可以使用。在这种情况下，将向要处理的元素的公共祖先添加单个事件处理程序。在处理程序内部，检查事件发生的元素，如果它是应该处理的元素之一，则执行实际的事件处理程序逻辑

在您的情况下，可能是这样的：

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

请注意，浏览器之间的事件系统存在差异，尤其是较旧的IE版本。如果您想支持这些版本，就必须处理这个问题。您可能还想考虑使用，而不是<代码> OnCase< /COL> .
，如注释中提到的，您可以使用。在这种情况下，将向要处理的元素的公共祖先添加单个事件处理程序。在处理程序内部，检查事件发生的元素，如果它是应该处理的元素之一，则执行实际的事件处理程序逻辑
在您的情况下，可能是这样的：

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

请注意，浏览器之间的事件系统存在差异，尤其是较旧的IE版本。如果您想支持这些版本，就必须处理这个问题。你也可以考虑使用，而不是<代码> OnCase< /Cord>。
你可以使用。你总是可以使用<代码>元素[i]。AdvestTistListar（“点击”，FoeNeNT，FALSE）；
您还可以将
for
循环更改为
（var i=0；i
将一个处理程序绑定到父元素。请参阅Muhammads链接。您可以使用。您可以始终使用
元素[i]。addEventListener（“单击”，functionName，false）
您还可以将
for
循环更改为
（var i=0；i
将一个处理程序绑定到父元素。请参阅穆罕默德链接。您的回答给人的印象是，在这里使用箭头函数是非常重要的。既然不是，你能不强调箭头的功能部分吗？这也将是更多的调用
forEach
而不是
.map
。您的回答给人的印象是，在这里使用箭头函数很重要。既然不是，你能不强调箭头的功能部分吗？这也将是更多的调用
forEach
而不是
.map
。您还可以指向讨论事件委派并具有兼容性说明的OP（例如，使用IE 6-8）您还可以指向讨论事件委派并具有兼容性说明的OP（例如，使用IE 6-8）