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

Question

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

Answer 1

The .click() is shorthand of .bind('click'), you can use either of them.

Answer 2

Who knew google have the answer!

http://stackoverflow.com/questions/518762/jquery-clickfn-vs-bindclick-fn

Answer 3

you can unbind a click event when you use the bind function and not when you use the click. Which is sometimes handy.

Answer 4

click() is basically a shortcut to bind('click').

Unlike click() you can pass data with a 2nd (optional) parameter of bind() to the event handler that is specified as a 3rd parameter:

.bind( eventType, [ eventData ], handler(eventObject) )

See http://api.jquery.com/bind/ for more.

Answer 5

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.

Answer 6

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.