带有选择器的本机addEventListener，如jQuery中的.on（）
有谁知道如何在本机JS中实现jQuery的.on（）方法？ “addEventListener”方法不会将子/选择器元素作为过滤方式，我认为我没有正确的冒泡/捕获知识来完全理解那里发生的事情。 我确实在event.js中查询了源代码，看起来最终addEventListener确实像通常那样被使用了，但是我不确定我是否非常了解源代码。
如果本机方法没有提供利用冒泡和捕获的机制，那么jQuery .on（）函数是否真的有任何好处，或者只是让它看起来那样？ 我的印象是
.on('parent', '.child', fn(){}); 比单独将事件附加到所有孩子更有效，但是根据我对源的解释，很难判断jQuery是否以某种方式管理这种方式以提高性能，或者仅仅是为了提高可读性。
是否有一种标准方法可以在父母身上实施事件，利用其子元素的冒泡/捕获阶段，而不是必须将事件附加到每个孩子身上？
要本机执行事件委托：
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事件，但仅在条件为事件目标返回true时执行，从而模拟直接连接的事件处理程序。
冒泡/捕获是一个相关的问题，但是如果多个事件处理程序的触发顺序很重要，您只需要担心它。 如果您有兴趣了解冒泡与捕获，我建议您进一步阅读事件订单 。
事件委托的最常见好处是它处理附加事件处理程序后添加到DOM的新元素。 使用单击处理程序获取上面的100行表示例。 如果我们使用直接事件处理程序附件（100个事件处理程序），则添加的新行将需要手动添加事件处理程序。 如果我们使用委托事件，那么新行将自动“拥有”事件处理程序，因为它在技术上已添加到父级，它将获取所有未来事件。 阅读什么是DOM事件委派 ，正如Felix Kling建议的那样，以获取更多信息。