我正在努力实现相当于:
$('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);
}
有没有不包含库的更优雅的方法?
最佳答案
你要的是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
或您想要的任何内容。
关于javascript - 将事件绑定(bind)到多个元素而不循环(vanilla JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20579995/