javascript - 将事件绑定(bind)到多个元素而不循环(vanilla JS)

Question

我正在努力实现相当于:

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

但没有 jQuery。我最初的想法是使用 for 循环来遍历集合中的所有元素，但我猜测有一种不使用循环(某种 native 方法？)实现这一点的更好方法。

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 .它的工作原理是将单个事件绑定(bind)到多个节点的父节点，并分析事件的目标节点。例如，您可以将 onmouseup 绑定(bind)到 body 节点，当在 div 节点上释放鼠标触发时， body 事件对象将在 target 属性中包含该 div。您可以分析目标以确保它符合特定条件。

更好的解释方法是提供一个 working example .

document.body.onmouseup = function (event) {
    var target = event.target || event.toElement;

    if (target.nodeName.toLowerCase() == "div") {
       alert(target.childNodes[0].nodeValue);
    };
};

这个例子的主要兴趣点是 target 变量，以及验证我们的 target 是 div 的条件。条件甚至可以是 className 或您想要的任何内容。