performance between jquery bind click and <a> tag onclick

Question

I am developing a web application and using quite a lot of JavaScript doing tasks. I have quite some tags that are bound with Jquery click to do some jobs, so I have code like this:

html code:

 <a href="#" id="id1">some content here</a>
 <a href="#" id="id2">some content here</a>
 ....

Jquery code:

 $('#id1').click(function(){
     //do something here..
     return false;
 });

 $('#id2').click(function(){
     //do something else here..
     return false;
 });

with this approach, when the script runs, jquery must look up the selectors (id1,id2, ect).

but there is another approach which avoid looking up selectors , this is as follow:

<a href="requireJs.htm" onclick="f1();return false">some content here</a>
<a href="requireJs.htm" onclick="f2();return false">some content here</a>

and js code:

 function f1(){
     //do something here..
 });

 function f2(){
     //do something else here..
 });

which approach is better, considering performance? thanks for help.

Answer 1

The real performance gain is by using only one event handler attached to the parent element, and catch the children element generated event with event.target, since events bubble up by default in JavaScript to the outermost parent.

Wrap your link in a div

<div id="parent">
 <a href="#" id="id1">some content here</a>
 <a href="#" id="id2">some content here</a>
</div>

Attach only one event listener to it

$('#parent').click(function(event){
    // event.target is now the element who originated the event
    $(event.target).doSomething();
});

This is a big increase in speed, expecially in older browsers such as IE, and when you start to have really many events.

View example here

Answer 2

Forget performance - any difference between the two will be inconsequential.

The first approach is MUCH better as it maintains a strict separation between behaviour and content.

Incidentally, the performance difference is only incurred on assigning the event-handler. In this case the inline-call does not have to "find" the dom element, however, since your jquery selector is selecting by id (which is very efficient), the "overhead" incurred by the extra step will be tiny.

Answer 3

Performance wise inline call is fast because it is triggered right away whereas if you use jquery it listens to this event and finds all the attached handlers and executes them in sequence. But using jquery you can manage to attach as many handlers you want in a systematic way.

Answer 4

One possibility would be to use .delegate() where you can set context specific bindings. This should be faster than both .live() and several .click() bindings due to how delegate works. There is an excellent write up on this here, an EXCELLENT MUST READ in SO here. Good Luck!

HTML

<div id="wrapper">
   <a href="#" id="id1">some content here</a>
   <a href="#" id="id2">some content here</a> 
</div>

Jquery/Javascript

$("#wrapper").delegate("#id1", "click", function(e){
   e.preventDefault();
   //do something here..
});

Jquery Delegate API

Answer 5

According to Jose Faeti's answer, here are two questions:

• How can I directly answer to his answer? ;)
• I have the following scenario: http://jsfiddle.net/syY4D/

The problem is, that an anchor-tag which contains other elements - such as divs, or spans - is not seen as clicked. It's child-element is tho.

<div id="foo">
    <a class="clickable" href="#a1" name="a1"><div>hello</div></a><br/>
    <div>i don't need to be listened to</div>

    <a class="clickable" href="#a2" name="a2"><div><span>there</span></div></a>
    <div>neither me, only a-tags should be concerned</div>

    <a class="clickable" href="#a3" name="a3">only i am "really" listened to</a>
    <div>more content</div>
</div>

This might be ugly, but in our existing application, that's the current state. So I reformed the according JavaScript as following:

$('#foo').click( function ( event ) {
    event.preventDefault();

    if( $(event.target).hasClass('clickable') ) {
        alert('clicked: ' + event.target.name );
    } else {
        if( $(event.target).closest('a.clickable').length )
            alert('has parent: ' + $(event.target).closest('a.clickable').attr('name') );
    }
});

My question: Is there any better solution to this? More performant? Is it ugly or would you do different?

Cheers