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

Question

我在我的 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 documentation，似乎事件总是在 DOM 树上冒泡。这是否意味着元素嵌套得越深，事件发生的时间就越长？

编辑：Is there a performance benefit to using JavaScript's event delegation rather than jQuery's? 正在问一个类似的问题，那里的答案很有用。我想知道使用常规事件处理程序和委托事件处理程序之间有什么区别。链接的问题看起来好像事件在不断地冒泡 DOM 树。使用委托事件处理程序，事件是否会冒泡到顶部，然后返回到指定元素？

Answer 1

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

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

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

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