带有选择器的本机addEventListener，如jQuery中的.on（） [英] Native addEventListener with selector like .on() in jQuery

问题描述

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

Does anyone know how jQuery's .on() method can be implemented in native JS? The "addEventListener" method does not take a child/selector element as a way to filter, and I don't think I have the proper bubbling/capturing knowledge to completely understand what is happening in there. I did consult the source in event.js, where it appears that eventually addEventListener does get used just as it normally does, but I'm not sure I quite grok the source.

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

If the native method does not provide a mechanism for taking advantage of bubbling and capturing, then does the jQuery .on() function really even have any benefit, or does it just make it look that way? I was under the impression that

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

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

is more efficient than attaching an event to all children individually, but from my interpretation of the source, it's difficult to tell if jQuery is somehow managing this in a way to leads to performance improvement, or if it's just for readability.

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

Is there a standard methodology for implementing events on a parent that take advantage of bubbling/capture phases for it's child elements, rather than having to attach an event to each individual child?

推荐答案

本地执行事件委托：

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个更有效。

The efficiency you are referring to has to do with how many event handlers you add. Imagine a table with 100 rows. It is much more efficient to attach a single event handler to the table element then 'delegate' to each row than attach 100 event handlers, 1 to each row.

原因事件委托工作是因为点击事件实际上会触发子项和父项（因为您点击了父项中的某个区域）。上面的代码片段会触发父对象的click事件，但只有当条件为事件 target 返回true时才会执行，从而模拟直接连接的事件处理程序。

The reason event delegation works is because a click event actually fires on both the child and the parent (because you're clicking over a region within the parent). The above code snippet fires on the parent's click event, but only executes when the condition returns true for the event target, thus simulating a directly attached event handler.

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

Bubbling/capturing is a related issue, but you only need to worry about it if the order of multiple event handlers firing matters. I recommend reading further on event order if you are interested in understanding bubbling vs capturing.

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

The most common benefit of event delegation is that it handles new elements that are added to the DOM after the event handler is attached. Take the above example of a table of 100 rows with click handlers. If we use direct event handler attachment (100 event handlers), then new rows that are added will need event handlers added manually. If we use delegated events, then new rows will automatically 'have' the event handler, because it's technically been added to the parent which will pick up all future events. Read What is DOM Event Delegation, as Felix Kling suggested, for more information.

这篇关于带有选择器的本机addEventListener，如jQuery中的.on（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！