Reputation: 4522
I'm dealing with some pages that are build using ajax calls to the server, so I am relying on .on()
to attach event handlers to new items.
I was wondering, however, if, when possible, is it more efficient to rely on the old javascript:function()
to call a function, whenever the event handler is a click
.
Here's an example.
I get from the server a link element a
:
<a href="javascript:doMoreStuff()" class="classThatDoesMore">Do More!</a>
and I insert it in the document like so:
// ajax call and so
$(this).html(response);
To "do more" I then have two ways (there might be other ways but I'm not aware of them, but any suggestion is welcome!):
$(document).on("click",".clssThatDoesMore",function(){ // I need (document)
// here something will be done
});
or
doMoreStuff(){
// here something will be done as well
}
As far as I know both solutions are pretty much cross-browser (I've tested href="javascript:function()"
and it goes back at least to IE8), but in case I'm wrong please let me know!
I was wondering if an excess of .on()
"listeners" may pose to much load on the browser, and so if it is better to rely on javascript:function()
, or if, on the contrary, .on()
does not require much resources at all and having several .on()
listeners in the page is not a problem.
PS I've abandoned onclick="doMoreStuff()"
since in Safari it was not working, while in FF the same exact code was and so was in Safari if done usinge href="javascript:doMoreStuff()
.
PPS this is not the same old question js v. jquery, to me the point is not which in general terms is more efficient, I would like to understand what's the best way in which this particular task can be achieved :-)
Upvotes: 2
Views: 1469
Reputation: 4675
Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.
From http://api.jquery.com/on/#event-performance
Just to add my two cents, i would focus more on the performance of my callback functions instead of the number of them. Memory is cheap and unless you reach crazy amounts of event handlers (100s), you will not see any performance impact based on their number.
Upvotes: 1
Reputation: 191739
javascript:doMoreStuff()
is just as bad, if not worse, than onclick="doMoreStuff()"
. You have a lack of flexibility, no fallback if JS is not enabled, and the javascript:
pseudo-protocol is not even compliant as I understand.
Let's forget about efficiency and just focus on the fact that .on
is much cleaner. You can separate it out from the html/ajax, and it's very simple to see what you are doing and change it later.
As for efficiency, I don't think you will notice a difference. .on
is very slightly less efficient in that the click event has to traverse the DOM tree a bit to figure out whether the event should fire, but that's very small potatoes.
Upvotes: 6