Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

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

like image 527
Sam Avatar asked May 30 '10 14:05

Sam


1 Answers

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.

like image 175
Erik Avatar answered Oct 04 '22 02:10

Erik