Geek Answers Handbook

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

Is there any use to using .click()over .bind('click')or vice versa, other than what you should do?

+5
source share
6 answers

Based on some very unscientific and very fast tests using .bind vs .click, it represents 15% (approximately) acceleration, as more than 50,000 iterations of each were tested.

This is not enormous, unless you are connecting a huge number of events, but I always think that doing it faster when he is not making any effort is something worthwhile.

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

Other Benefits - Link Multiple Events

, , . .bind, :

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

bind(). docs:

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

()

( )

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

" ", "", " ", . . http://jsbin.com/idare/edit .

.

+10

.click() .bind('click'), .

+3

click() - bind('click').

click() () bind() , :

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

. http://api.jquery.com/bind/.

+1

jQuery

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

bind .click , dom , , , , ajax, , ""

live, , ajax, ajax , .

+1
source

You may also notice the advantage of "bind" if you have the same handler for two or more events. In fact, using “binding” avoids redundancy. Example:

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

Even if the function of the handler is almost the same, with the exception of a few instructions, using (BIND) is still useful, but should be used (event.type) to distinguish between events.

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

More articles:


All Articles