I frequently see code like:

$("#thing").on("mouseenter",function(){ Do stuff });

Personally, I almost always write:

$("#thing").mouseenter(function(){ Do stuff });

Similarly, I often write

$("#thing").click(function(){})

but I have seen people correct it to (yes, I know on is preferred over bind in v. 1.7+, so it's essentially the same preference issue):

$("#thing").bind("click",function(){}) 

Am I doing something "wrong", is there a deep difference between the two functions that I'm not seeing? It always seems to do what I want it to do, so it's never been a practical concern, but I'd be interested to know if there's a theoretical consideration I'm overlooking.

I frequently see code like:

$("#thing").on("mouseenter",function(){ Do stuff });

Personally, I almost always write:

$("#thing").mouseenter(function(){ Do stuff });

Similarly, I often write

$("#thing").click(function(){})

but I have seen people correct it to (yes, I know on is preferred over bind in v. 1.7+, so it's essentially the same preference issue):

$("#thing").bind("click",function(){}) 

Am I doing something "wrong", is there a deep difference between the two functions that I'm not seeing? It always seems to do what I want it to do, so it's never been a practical concern, but I'd be interested to know if there's a theoretical consideration I'm overlooking.

• javascript
• jquery

Share Follow edited Apr 28, 2013 at 22:15 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Apr 18, 2013 at 15:16 Jason NicholsJason Nichols 3,76033 gold badges3232 silver badges5151 bronze badges 1

• 1 There is no functional difference between the two, the performance difference is also negligible. One difference that IS important (in my opinion) is keeping the code consistent. If the existing code uses .on throughout rather than the shorthand, keep using .on. – Kevin B Commented Apr 18, 2013 at 15:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Not really, it's just a little faster as the mouseenter function calls on (or trigger if called without argument) as can be seen in the source code :

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

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});

As you can see, the same can be said for many events.

Personally, I prefer to use the mouseenter (or click, etc.) function when I don't need the special features of on : one of the big advantages in my opinion in using jQuery is that it makes the code less verbose and more readable. And I don't think you should be corrected, ask the guys who corrects you why he does that.

Normally, the specific events like .click or $.post are shortcuts. They act the same as using the .on and $.ajax functions but the latter normally have greater flexibility. EG .on can bind to multiple event while .click only subscribes to clicks. Same applies to the $.ajax function, there are more options where as the shortcuts have certain defaults set.

There's no practical difference between the two, the shorthand functions (.click(), .mouseover(), etc) call .on() to actually bind the event handler anyway. The only "advantage" to using .on() directly is that you don't have the additional overhead of a second function call; I suspect that's likely to be marginal enough that it's a very premature optimisation though.

It's not neccessarily wrong, but on has its advantages over the normal way.

By "binding" the event to your parent container $(parent).on(event, target, function() { //foobar }); you are able to add new target elements into your container, while not having to repeat the jquery to bind the event.