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次。 （当然，手动冒泡只发生一次。）

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

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

1 个答案: