Javascript 将jQuery.on（event，selector，func）转换为.addEventListener（event，func），特别是DOM树后面的选择器部分和事件气泡

我想将项目中的代码从jQuery.on转换为.addEventListener，并删除对jQuery的依赖

主要问题：有没有一种方法可以用相对较少的代码来实现这一点，或者我是否需要像jQuery那样编写自定义事件处理

单击c应该返回c的处理程序，然后是b，然后是a

我已经阅读了多个stackoverflow问题*和答案，这些问题和答案让我基本了解了这两个问题之间的区别，或者基本上是jQuery添加的传统逻辑。在这里，您可以看到一个基本示例，我希望以jQuery的方式工作

我很清楚，当事件从目标div.c冒泡出来时，它会到达div.a，然后div.a上的侦听器会按照它们添加的顺序被触发，这在本例中会导致a、b、c，而不是像jQuery那样的c、b、a

b是粗体的，因为它不会被触发，尽管这可能是期望的行为。 未被触发的原因是e.target div.c与querySelector.b不匹配

在我看来，当从.addEventHandler触发事件时，jQuery使用自己的句柄/触发事件。 而且它似乎考虑了DOM嵌套，即使侦听器是从公共父级触发的。 考虑DOM嵌套的最后一部分是我希望使用“vanilla”js

使用$.\u数据元素“events”，我们可以访问jQuery内部存储的事件以查看它们。 此处的guid属性似乎指示事件触发的顺序。 如何确定/触发订单，但我无法找到

非常感谢您的帮助

*相关问题

---

您可以遍历目标的所有祖先，检查它们是否匹配特定选择器，并为每个匹配实例调用回调

它们激发的顺序仍然是它们添加到根元素的顺序

HTMLElement.prototype.delegate=函数名、选择器、回调{ var rootElement=this； this.addEventListenerEventName，function{ var matchingAncestors=[]，parent=e.target.parentElement； //TODO:如果目标是根元素，则中止 如果e.target.matchesselector{ 控制台。日志“选择器”，选择器，“匹配目标” 回拨 }否则{ //我们知道这不是目标，所以继续寻找选择器匹配 而父元素和父元素！==rootElement{ 如果parent.matchesselector{ 匹配ancestors.pushparent } parent=parent.parentElement } //调用每个实例的回调函数 匹配存储器forEachfunctionel{ console.logel“与目标的祖先匹配” 回拨 }; } } } var a=document.querySelector.a； a、 addEventListenerclick，函数E{ 控制台。日志“******************************************” console.loga\n； }; a、 委托“单击”，“.b”，函数E{ console.log-delegate b\n； } a、 委托“单击”、“c”和“函数E”{ console.log-delegate c\n； } div{左填充：30px；边框：1px实心ccc} A. B 舔我

---

谢谢你的回答！你的回答告诉我，我需要一些自定义逻辑才能从小提琴中获得所需的行为？好吧，那么我必须考虑如何以正确的顺序触发事件。谢谢你给我指明了正确的方向！可以修改和使用选择器数组，并在祖先树上按子代在父代之前的顺序激发。你的用例是什么？那太好了！问题是这样的。我试图完全取代jQuery，因为使用纯js可以获得更好的性能。这是针对我的基本项目，用于创建其他项目，在这些项目中，我真正专注于实现高性能，因此用户总是感觉页面在任何时间点响应命令。那么您尝试过吗？正如问题所述……当然，但这也不是免费的代码编写服务。

------------------------------------------
|                   a                    |
|                                        |
|     -----------------------------      |
|     |             b             |      |
|     |                           |      |
|     |      ---------------      |      |
|     |      |      c      |      |      |
|     |      |             |      |      |
|     |      |             |      |      |
|     |      |             |      |      |
|     |      |             |      |      |
|     |      |             |      |      |
|     |      ---------------      |      |
|     |                           |      |
|     |                           |      |
|     -----------------------------      |
|                                        |
|                                        |
------------------------------------------