在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文档,似乎事件总是在DOM树上一直冒泡.这是否意味着进一步嵌套元素,事件需要工作的时间越长？

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

Answer 1

每当你在文档中的任何地方点击时,事件将被手动冒泡到document元素(在发生自然冒泡之后)并且将为被点击的元素和之间的每个元素运行选择器引擎document.

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

此外,这将发生在每个选择器document上.因此,如果您为其提供20个选择器并单击20个元素,则选择器引擎必须为该单击运行400次.(当然,手动鼓泡只发生一次.)

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