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

Question

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.

Runkel

Looks like click also has the optional data parameter. Anybody know if there are any differences between how it works? Source: api.jquery.com/click – Loosetongued

Answer 1

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)

Hadlock

True — click() is basically shorthand for bind('click') (or, in this day an age, it actually calls on('click'). The way I see it, you might as well save yourself that extra function call by using on('click') directly. – Giralda

They do the same but bind() let's you say, I want something to happen when the use hovers AND clicks etc. See https://mcmap.net/q/187713/-jquery-click-fn-vs-bind-39-click-39-fn below for the example. You can of course only bind to one event, e.g. 'click' as well. – Jellybean

Answer 2

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

Outrush

+1 That binding multiple events is news to me and possibly quite useful. – Sayed

Answer 3

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

Cession

Answer 4

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.

Candent

Answer 5

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.

Hansiain

Answer 6

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.

Castiron

Answer 7

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.

Donahoe

Answer 8

The three code snippets you mentioned have some differences in terms of event handling and event delegation. Let's break down each one:

1. $(".myBtn").click(function(){});: This code binds a click event handler directly to all elements with the class "myBtn" that exist at the time of execution. It attaches the event handler directly to those elements. If new elements with the same class are added dynamically after this code has run, they will not have the click event handler attached to them.

2. $(".myBtn").on("click", function(){});: This code also binds a click event handler to all elements with the class "myBtn", but it uses the on method to attach the event handler. The on method is a more flexible way of binding event handlers and allows you to handle multiple events and perform event delegation. Similar to the first code snippet, if new elements are added dynamically after this code has run, they will not have the click event handler attached to them.

3. $(document).on("click", ".myBtn", function(){});: This code uses event delegation to bind the click event handler to the document object, but it specifies that the handler should only be executed when the event target matches the selector ".myBtn". This means that the click event is delegated to the document, and any click events that occur on elements matching the ".myBtn" selector, whether they exist at the time of binding or are added dynamically later, will trigger the event handler.

4. $(".myBtn").bind("click",function(){});: The bind() method is an older version of event binding in jQuery. It is similar to the on() method but has been deprecated as of jQuery version 3.0. It can bind multiple event handlers to elements, but it lacks some of the features and flexibility provided by on().

The key difference between the three approaches is in event delegation. The third approach is useful when dealing with dynamically added elements or when you want to attach an event handler to a common ancestor element (like document) and handle events that bubble up from the descendant elements.

In summary:

• Approach 1 directly binds the event handler to existing elements.
• Approach 2 also binds the event handler to existing elements but provides more flexibility for handling multiple events.
• Approach 3 uses event delegation to handle events on existing and dynamically added elements by delegating the event to a common ancestor element.
• Approach 4 is An older version of event binding in jQuery (deprecated in jQuery 3.0). Similar to the on() method but lacks some features and flexibility.

Coltun