jQuery: $().click(fn) vs. $().bind('click',fn);

JavascriptJqueryEvent Handling

Javascript Problem Overview


When using jQuery to hookup an event handler, is there any difference between using the click method

$().click(fn)

versus using the bind method

$().bind('click',fn);

Other than bind's optional data parameter.

Javascript Solutions


Solution 1 - Javascript

For what it's worth, from the jQuery source:

jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
    "mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave," +
    "change,select,submit,keydown,keypress,keyup,error").split(","), function(i, name){

    // Handle event binding
    jQuery.fn[name] = function(fn){
        return fn ? this.bind(name, fn) : this.trigger(name);
    };
});

So no, there's no difference -

$().click(fn)

calls

$().bind('click',fn)

Solution 2 - Javascript

+1 for Matthew's answer, but I thought I should mention that you can also bind more than one event handler in one go using bind

$('#myDiv').bind('mouseover focus', function() {
    $(this).addClass('focus')
});

which is the much cleaner equivalent to:

var myFunc = function() {
    $(this).addClass('focus');
};
$('#myDiv')
    .mouseover(myFunc)
    .focus(myFunc)
;

Solution 3 - Javascript

There is one difference in that you can bind custom events using the second form that you have. Otherwise, they seem to be synonymous. See: jQuery Event Docs

Solution 4 - Javascript

There is the [data] parameter of bind which will occur only at bind-time, once.

You can also specify custom events as the first parameter of bind.

Solution 5 - Javascript

I find the .click() is way more logical, but I guess it's how you think of things.

$('#my_button').click(function() { alert('BOOM!'); });

Seems to be about as dead simple as you get.

Solution 6 - Javascript

If you have Google Chrome, their developer tools have an event listener tool, select the element you want to spy its' event.

You'll find that trying the both ways lead to the same result, so they are equivalent.

Solution 7 - Javascript

I prefer .bind() because of its interface consistency with .live(). Not only does it make the code more readable, but it makes it easier to change a line of code to use one method instead of the other.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlan StormView Question on Stackoverflow
Solution 1 - JavascriptMatthew MaravillasView Answer on Stackoverflow
Solution 2 - JavascriptnickfView Answer on Stackoverflow
Solution 3 - JavascriptnickohrnView Answer on Stackoverflow
Solution 4 - JavascriptaaronView Answer on Stackoverflow
Solution 5 - JavascriptJedHView Answer on Stackoverflow
Solution 6 - JavascriptOmar AbidView Answer on Stackoverflow
Solution 7 - JavascriptdanortonView Answer on Stackoverflow