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

Question

我一直在摆弄“纯javascript与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>

然后我附加了3个空事件处理程序：

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);

通过在每个div上触发click事件来完成测试。的 JSPerf for this is here

我无法弄清楚：

• 为什么点击#div_live比点击#div_regular效率更高？
• 为什么点击#div_live_wrap的速度与#div_regular一样慢，即使它与点击#div_live一样有效？

有人可以解释一下吗？非常感谢你。

http://jsperf.com/jquery-evetns-regular-vs-delegated