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

时间:2013-01-05 16:54:14

标签: javascript jquery javascript-events

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

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

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

比单独将事件附加到所有孩子更有效,但是根据我对源的解释,很难判断jQuery是否以某种方式管理这个以提高性能的方式,或者只是为了可读性。< / p>

是否存在一种标准方法,用于在父级上实现事件,利用其子元素的冒泡/捕获阶段,而不是必须将事件附加到每个孩子?

1 个答案:

答案 0 :(得分:19)

本地执行事件委托:

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事件,但仅在条件为事件 target 返回true时执行,从而模拟直接连接的事件处理程序。

冒泡/捕获是一个相关的问题,但是如果多个事件处理程序的触发顺序很重要,您只需要担心它。如果您对了解冒泡与捕获感兴趣,我建议您继续阅读event order

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