Reputation: 4487

Benefits of .click() over .bind('click') in jQuery

Is there any benefit to using .click() over .bind('click') or vice-versa besides the amount of typing you have to do?

Upvotes: 5

Answers (6)

Abdennour TOUMI

Reputation: 93173

You may also notice the benefit of "bind" if you have the same handler for two or more events. In fact, The use of "bind" avoids redundancy. example:

$('#myId').bind('click mouseenter mouseleave',
      function(){
        $(this).toggleClass('myClass');
     }
);

Even if the handler function is almost the same except for a few instructions, using (BIND) is still useful but must be used (event.type) to differentiate between events.

$('#myId').bind('click mouseenter mouseleave',
              function(e){
                $(this).toggleClass('myClass');
                 if(e.type ==='click'){
                        //do sthg
                  }
             }
    );

Upvotes: 0

Erik

Reputation: 20712

Based on some very unscientific and very quick tests using .bind vs .click represents a 15% (roughly) speed up, as tested over 50,000 iterations of each.

Its not huge, unless you're binding massive numbers of events, but I'm always of the thought that making it faster when it takes no effort is something worth doing.

My quick & dirty test: http://jsbin.com/ixegu/edit

Other Benefits - Bind Multiple Events

Since you accepted this answer, I thought I'd add a bit more. You can also bind multiple events with .bind, for example:

$('#link').bind('mouseover focus', function() { ... });

There's another syntax for binding multiple events via the bind() method. From the docs:

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

Pass extra data on event with bind()

Then there's the ability to pass arbitrary data when you create the bind (only at the time you create the bind)

<div id="link">Happy</div>
<div id="otherlink">Sad</div>

function myHandlerFunc(e) {
  alert('This is a ' + e.data.myVal + ' function.');
}

$('#link').bind('click', { myVal : 'Happy' } , myHandlerFunc);
$('#otherlink').bind('click', { myVal: 'Sad' }, myHandlerFunc);

The above alerts "This is a happy link" when you click on happy, and "This is a sad link" when you click on sad. See http://jsbin.com/idare/edit for an example.

Read the docs

You can always find out more here.

Upvotes: 10

RobertPitt

Reputation: 57268

I would start to use jQuery live handling

$('a.ajax').live('click',processAjaxItem());

if your using bind and .click the items that are in the dom at the time will only be binded with your function, so whatever you content you pull in via ajax that match your expression will not be "bound"

Where as if you use live then links containing ajax class that come from ajax content after you have run the function will also be binded.

Upvotes: 1