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轻量级（您拥有的嵌套元素越少，页面中的事件就越快）
不要附加无用的事件监听器，它只会无缘无故地消耗资源（所以-again - 删除jQuery）。
尝试不触发 reflow ，因为将重新计算所有元素的位置和尺寸。例如，CSS位置更改或input.focus()导致 reflow 。

希望能帮助到你，最好的问候，

Answer 2

如果您的代码没有生成任何子div

     <div class="cool-div">

动态然后直接完美且工作顺利。否则最好使用委托，因为有时直接可能不适用于动态生成的元素。

哪个jQuery .on（）更快：直接或委派？

2 个答案:

删除JQUERY

DOM如何工作？

一些指南