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.
Comments
Post a Comment