javascript - Why is event handled by jQuery's .on() with selector much faster than regular .on()? -

For a while I'm unhappy with the "pure JavaScript vs. jQuery" performance. But there are things I do not understand. I'll show it on my test code:

I have this simple HTML structure:

  & lt; Div id = "div_regular" & gt; & Lt; / Div & gt; & Lt; Div id = "div_live_wrap" & gt; & Lt; Div id = "div_live" class = "target2" & gt; & Lt; Div id = "div_live_target" class = "target" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Then I attach 3 empty event handlers:

  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); // Representative Event Attached $ ('# div_live') ('Click', 'target', handler); // Other representative event attached $ ('# div_live_wrap') ('Click', 'target2', handler);  

Test is done by firing click event on each div .

I do not understand:

• Clicking on why #div_live is so high #div_regular Clicking on
• Why #div_live_wrap is slow in the form of #div_regular , even if it should #div_live Can be efficient as click on ?

Can anyone explain this? Thanks a lot.