Javascript 为什么事件由jQuery处理'；带选择器的s.on（）比常规的.on（）快得多？

一段时间以来，我一直在摆弄“纯javascript vs.jQuery”的性能。但有些事情我就是不明白。我将在测试代码中显示它：

我有一个简单的HTML结构：

<div id="div_regular"></div>
<div id="div_live_wrap">
  <div id="div_live" class="target2">
    <div id="div_live_target" class="target"></div>
  </div>
</div>

通过在每个div上触发click事件来完成测试。

我不明白的是：

• 为什么点击

  #div_live

  比点击

  #div_regular

  更有效
• 为什么点击

  #div_live_wrap

  和

  #div_regular

  一样慢，尽管它应该和点击

  #div_live

  一样高效

有人能解释一下吗？多谢各位

---

在这里，您不必担心性能，没有人能够每秒单击超过100次，除了Jon SkeetBTW，在您的示例中，您不会使事件冒泡，因此只有第一个事件触发处理程序。这是无偏见的jsPerf:@jeromyrefrench我很抱歉，但我对你的评论有点迷茫。你能详细描述一下吗？我不知道您是否在这里看到过这个问题的JSPerf测试：@Frodik：您正在将

气泡

设置为

false

，因此事件委派将不起作用，并且在第二个测试用例中没有要执行的事件处理程序。看，我只是用稍微不同的词重复了@A.Wolff说的话；）

var div_regular = document.getElementById('div_regular');
var div_live = document.getElementById('div_live');
var div_live_target = document.getElementById('div_live_target');

function handler() {  }

// regular event attached
$('#div_regular').on('click', handler);
// delegated event attached
$('#div_live').on('click', '.target', handler);
// another delegated event attached
$('#div_live_wrap').on('click', '.target2', handler);