带有选择器的本机addEventListener,如jQuery中的.on()

Question

有谁知道如何在本机JS中实现jQuery的.on()方法？"addEventListener"方法不会将子/选择器元素作为过滤方式,我认为我没有适当的冒泡/捕获知识来完全理解那里发生的事情.我确实在event.js中查询了源代码,看起来最终addEventListener确实像通常那样使用了,但我不确定我是否非常了解源代码.

如果本机方法没有提供利用冒泡和捕获的机制,那么jQuery .on()函数是否真的有任何好处,或者只是让它看起来那样？我的印象是

.on('parent', '.child', fn(){});

比单独将事件附加到所有孩子更有效,但是从我对源的解释来看,很难判断jQuery是以某种方式管理这个以导致性能改进的方式,或者仅仅是为了可读性.

有没有一种标准方法可以在父母身上实施事件,利用其子元素的冒泡/捕获阶段,而不是必须将事件附加到每个孩子身上？

Answer 1

要本机执行事件委托:

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个更高效.

事件委托的工作原因是因为click事件实际上会触发子节点和父节点(因为您单击父节点内的某个区域).上面的代码片段触发父对象的click事件,但仅在条件为事件目标返回true时执行,从而模拟直接连接的事件处理程序.

冒泡/捕获是一个相关的问题,但是如果多个事件处理程序的触发顺序很重要,您只需要担心它.如果您有兴趣了解冒泡与捕获,我建议您进一步阅读活动顺序.

事件委派的最常见好处是它处理附加事件处理程序后添加到DOM的新元素.以点击处理程序为例,显示100行表格的上述示例.如果我们使用直接事件处理程序附件(100个事件处理程序),则添加的新行将需要手动添加事件处理程序.如果我们使用委托事件,那么新行将自动"拥有"事件处理程序,因为它在技术上被添加到父级,它将获取所有未来事件.阅读什么是DOM事件委派,正如Felix Kling建议的那样,以获取更多信息.