在JavaScript和jQuery中使用委托事件处理程序是否存在性能缺陷？

我在我的JavaScript代码中使用委托事件处理程序（jQuery），因此当单击动态添加按钮时会发生这种情况。

我想知道这有性能上的缺点吗？

// Delegated event handler $(document).on('click', '#dynamicallyAddedButton', function(){ console.log("Hello"); }); 

性能方面，它与此相比如何？

 // Regular event handler $("#regularButton").on('click', function(){ console.log("Hello Again"); }); 

看一下jQuery文档 ，似乎事件总是在DOM树上一直冒泡。 这是否意味着进一步嵌套元素，事件需要工作的时间越长？

编辑： 使用JavaScript的事件委托而不是jQuery是否有性能优势？ 问一个类似的问题，答案是有用的。 我想知道使用常规事件处理程序和委托事件处理程序之间的区别。 链接的问题使得事件似乎不断冒出DOM树。 使用委托事件处理程序，事件会冒泡到顶部，然后返回到指定的元素吗？

Answer 1

每当您在文档中的任何位置单击时，事件将被手动冒泡到document元素（在自然冒泡发生之后），并将为单击元素和document之间的每个元素运行选择器引擎。

因此，如果您单击嵌套了20个元素的元素，则选择器引擎将为该单击运行20次。

此外，对于document具有的每个选择器都会发生这种情况。 因此，如果您给它20个选择器并单击20个元素深度，则选择器引擎必须为该单击运行400次。 （当然，手动冒泡只发生一次。）

基于选择器的委派很好，但如果可能的话，尽量让它更接近目标元素。