Question

我正在努力实现相当于：

$('div').on('click', function() {
    // Do something
});

但没有jQuery。我最初的想法是使用for循环迭代集合中的所有元素，但我猜是有更好的方法来实现这一点而不使用循环（一些本机方法？）。

var elems = document.getElementsByTagName('div');

function someEvent() { // Generic function to test against
    alert('event fired');
}

for (var i=0, j = elems.length; i < j; i += 1) {
    elems[i].addEventListener("click", someEvent);
}

如果不包含库，是否有更优雅的方法？

Answer 1

你想要的是event delegation。它的工作原理是将单个事件绑定到多个节点的父节点，并分析事件的目标节点。例如，您可以将onmouseup绑定到body节点，当通过在div节点上释放鼠标触发它时，body事件对象将包含div节点{1}}属性中的{1}}。您可以分析目标以确保它符合某些标准。

更好的解释方法是提供working example。

target

此示例的主要兴趣点是document.body.onmouseup = function (event) { var target = event.target || event.toElement; if (target.nodeName.toLowerCase() == "div") { alert(target.childNodes[0].nodeValue); }; };变量，以及验证我们的target是target的条件。这种情况甚至可以是div或你心中想要的任何事情。

将事件绑定到多个元素而不循环（vanilla JS）

1 个答案: