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

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

你想要的是事件授权.它的工作原理是将单个事件绑定到多个节点的父节点,并分析事件的目标节点.例如,您可以绑定onmouseup到body节点,并且当从div节点上释放鼠标触发它时,body事件对象将div在target属性中包含该节点.您可以分析目标以确保它符合某些标准.

解释这个的更好方法是提供一个工作示例.

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

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

这个例子的主要关注点是target变量,以及验证我们target是a 的条件div.这种情况甚至可以是className你心中想要的东西.