javascript - 哪个 jQuery .on() 更快 : direct or delegated?

Question

假设我需要设置'click' <div class="cool-div"> 上的事件监听器。假设它有一个祖先。

<div class="cool-ancestor">
    ...
    <div class="cool-div">
    ...
</div>

为了获得更好的性能，我应该使用以下哪些代码？为什么？

a) $(document).on('click', '.cool-div', function(){...})

b) $('.cool-ancestor').on('click', '.cool-div', function(){...})

c) $('.cool-div').on('click', function(){...})

情况1

• 只有一个<div class="cool-div">在页面上。

情况2

• 有很多<div class="cool-div">在页面上。

Answer 1

删除 JQUERY

如果您对性能感兴趣，那么首先要做的就是删除 jquery。尽情享受Vanilla-JS performance 。JQuery 在选择元素时速度较慢，这是事实，但讨厌 JQuery 的另一个原因是它会自动将事件监听器附加到某些元素。
例如，如果您使用 jquery 1.11，则所有 a 标记都将具有 blur 和 focus 事件监听器设置完毕。

DOM 是如何工作的？

如果您想在导航器中构建功能强大的应用程序，您需要知道导航器如何处理您的代码。
所以，here is a wonderful article about DOM events
reflow and repaints
和a good ressource about what will call a reflow

一些指南

如果您没有时间阅读上面的文章，请考虑以下准则:

• 保持 HTML 简洁(嵌套元素越少，页面上的事件运行速度就越快)
• 不要附加无用的事件监听器，它只会无缘无故地消耗资源(所以再次删除 jQuery)。
• 尽量不要触发回流，因为所有元素的位置和尺寸都会重新计算。例如，CSS 位置更改或 input.focus() 导致回流。

希望能帮助到你，致以诚挚的问候，