2

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

Improve this question
4
  • 7
    More efficient for code execution, maybe, but it's a maintenance nightmare if it gets too complex. Commented Jan 22, 2013 at 16:39
  • href="javascript:function()" probably goes back to Netscape 2! :) But my recommendation is to stay away from inline event handlers, for the reason Kevin B mentioned above. Commented Jan 22, 2013 at 16:40
  • I guess you mean javascript:function() right? That was my main doubt, but if it is worth from an efficiency point of view, I might consider it (and perhaps handle it in the source code with a php function that builds the variables to pass for me..), that's why the long question :-) Commented Jan 22, 2013 at 16:42
  • It's not more efficient. And when debugging, you'll look at your js code a few months from now and wonder, "there's an event listener running, but where did it come from?! it's not on my js code!" Commented Jan 22, 2013 at 16:46

2 Answers 2

Reset to default
6

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I think inline handlers even have more parser and execution overhead than js-attached handlers.
@Bergi very possible; it could be less memory efficient in that the browser attaches a separate event with each javascript:, but if it doesn't attach events then that's not the case. .on only attaches one event.
@Bergi: An inline handler just becomes a function on the on[eventName] property of the element. The string provided inline becomes the body of the function, so that would be the only execution overhead.
@thesystem: OK, I rather meant memory overhead than execution overhead - with inline handlers, each element has its own distinct function. If they all have the same function body, that's inefficient.
@Bergi: I don't understand that either, and maybe they've changed it since I read the source. I know that for a while they were storing some data on properties of the bound handler, and utilizing the closure created, both of which would require a separate function. I'd have to look again to refresh my memory, but it would seem avoidable.
|
1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.