Question

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

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

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

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

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

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

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

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

带有选择器的本机addEventListener，如jQuery中的.on（）

1 个答案: