javascript 自定义事件绑定委托，如 jQuery.on()答案

【问题标题】：javascript custom event bind delegation like jQuery.on()javascript 自定义事件绑定委托，如 jQuery.on()
【发布时间】：2018-02-07 16:12:12
【问题描述】：

我正在尝试通过使用addEventListener() 方法来模仿jQuery.on("click", ".target", handler)。我对 Stackoverflow 的研究得到了这样的结果：Native addEventListener with selector like .on() in jQuery。

所以，在有人将我的问题标记为重复之前，请仔细阅读我的要求和演示。

这是我的 Plunker 演示 https://plnkr.co/edit/so8Sur?p=preview（我在测试时正在运行 chrome）。以下是对它的解释：

“jQuery 方式”的紫色框按照我的预期运行，无论我点击 .target 框还是 .target-child 的子级，都应该显示消息弹出窗口。
但是对于我的自定义事件绑定的绿色框，具有自定义功能：customOn(selector, type, filter, handler)，它只会在单击.target 框时显示弹出窗口，但当我单击.target-child 时不会显示弹出窗口。

所以，我的问题是，我想知道在我的演示中单击.target-child 时，jQuery 使用了什么样的魔法来触发事件，而实际的选择器过滤器是.target。 jQuery 是否会在每次需要处理委托事件时遍历 DOM 树以检查任何选择器匹配？如果是，我觉得它会占用足够的计算资源（也许是 RAM），对吗？我希望有更有效的方法，而不是像那样遍历。

任何答案和评论将不胜感激。提前致谢。

【问题讨论】：

根本没有魔法，它只是使用事件冒泡。你的逻辑似乎过于复杂了。
@RoryMcCrossan，感谢您的评论。实际上，我对事件冒泡知识并不是很擅长。如果你能给我一个答案，通过使用那些事件冒泡来模仿 jQuery 方式，那就太好了。
该答案在您链接到的副本中。
我记得我已经尝试过了，结果也出乎意料，这里是基于我对链接到的 Stackoverflow 的理解的演示：plnkr.co/edit/2eWO61?p=preview。如果你点击“目标的孩子”框，它不会像“jQuery方式”那样做任何事情（期望显示弹出窗口）

标签： javascript jquery

【解决方案1】：

Jquery 使用 css 选择器作为爬取系统。因此，如果您单击某些东西，它会“抓取”父母，直到它匹配（或不匹配）目标。

【讨论】：

这种行为，称为“事件冒泡”而不是“爬行”，首先与选择器无关，其次不是 jQuery 特定的。这是一个 JS 构造。
不错的反对票，谢谢。它确实执行爬网，这正是冒泡。这都是关于选择器和 jquery 的，因为@bayu 询问 jquery 如何在作为另一个子对象的对象上触发事件，并且 jquery 语法使用 css 选择器让开发人员通过类名选择对象。这是一个简单的答案，对操作人员来说很容易理解。没关系。
感谢您的回答，但是我仍然找不到与您的回答相匹配的官方文档，关于这些 CSS 如何使用 jQuery on() 方法“抓取”与事件委托相关的内容。
如果您需要有关它的文档，正如@RoryMcCrossan 所说，您必须搜索“javascript bubbling”。我用“爬行”这个词来描绘会发生什么洞察力