问带有选择器的原生addEventListener，如jQuery中的.on()

EN

要本机执行事件委派，请执行以下操作：

parent.addEventListener('click', function(e) {
    if(e.target.classList.contains('myclass')) {
        // this code will be executed only when elements with class 
        // 'myclass' are clicked on
    }
});

您所指的效率与您添加的事件处理程序的数量有关。想象一下一个有100行的表。将单个事件处理程序附加到表元素，然后“委托”到每行，比附加100个事件处理程序(每行1个)要有效得多。

事件委派之所以有效，是因为单击事件实际上会同时在子级和父级上触发(因为您是在父级中的某个区域上单击)。上面的代码片段在父级的单击事件上触发，但仅当事件目标的条件返回true时才执行，从而模拟直接附加的事件处理程序。

冒泡/捕获是一个相关的问题，但只有在多个事件处理程序触发的顺序很重要的情况下，您才需要担心它。如果您对理解冒泡与捕获感兴趣，我建议您进一步阅读event order。

事件委托最常见的好处是，它可以处理附加事件处理程序之后添加到DOM中的新元素。以上面包含100行的表为例，该表具有单击处理程序。如果我们使用直接的事件处理程序附件(100个事件处理程序)，那么添加的新行将需要手动添加事件处理程序。如果我们使用委托事件，那么新行将自动“拥有”事件处理程序，因为从技术上讲，它已被添加到将拾取所有未来事件的父处理程序中。根据Felix Kling的建议，请阅读What is DOM Event Delegation以获取更多信息。

添加到公认的答案中:由于实际的事件目标通常嵌套在您想要将侦听器绑定到它的元素中，因此最好查询父级(Element.closest()包括元素本身)。同样，这也适用于复杂的CSS选择器，而不仅仅是单个类。

<button><span>button with</span><span>multiple click targets</span></button>

function addListener(el, type, callbackFn, selector) {
    el.addEventListener(type, e => {
        const target = e.target.closest(selector);
        if (target) callbackFn.call(target, e);
    }, true);
}
addListener(document, "click", e => console.log("clickediclick"), "button");