Question

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

有没有更好的方法在纯js中同时将“onclick”函数处理程序附加到所有按钮？

Answer 1

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

在你的情况下，它可能是：

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

请注意，浏览器之间的事件系统存在差异，尤其是旧的IE版本。如果想要支持这些版本，您将不得不处理这个问题。您可能还想考虑使用addEventListener而不是onclick。

Answer 2

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

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

示例：

insert into newtable 
with subtable as (......) 
select * 
from subtable

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
});

如果你可以使用Arrow Functions，它们仅在ES6中受支持，你可以压缩更多代码：

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

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;});

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

2 个答案: