.on vs .click Event Handling

Thanks Jesus.

Thanks for your reply, Steve. I understand that aspect of the functions.

Let me rephrase my question, beyond the differences in syntax and need for a parameter, is there really a difference in terms of usage or performance OR does it just really come down to the developer's preference?

I see your point in that using the shorthand would be less typing. I think I'm just looking at it from an association standpoint in that .on may be easier to remember and associate with event handling rather than having to memorize each individual shorthand function and recognize it as an event handler rather than a different method or function.

Hi Jeremy,

I'd say it's really down to developer preference unless you need to do event delegation which Jesus and Kevin talked about. In that case, you have to use the .on() method.

I think these shortcut methods basically exist for less typing. If you need to initiate a click event, it's simply easier to type .click() than .trigger("click")

In terms of performance, it's likely a negligible difference. The shortcut methods are going to be slightly slower.

Here's a link to the alias.js file from the jQuery source: https://github.com/jquery/jquery/blob/master/src/event/alias.js which I think is the relevant code.

lines 10 to 21 of that file:

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup 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 );
    };
} );

On line 17 there's a ternary operation which checks the number of arguments passed in. If 1 or more arguments were given then the .on method will be called with the arguments passed on through. If no arguments were given then the .trigger method will be called instead.

So when you use the .click method you have the slightly extra overhead of that ternary operation and another function call.

Thanks Kevin. If I could give out two best answers, I'd give you one as well. I'm giving it to Jesus just because he replied first. Thanks again for your response though. It's very insightful.

You're welcome. Jesus deserves the best answer! You made the right choice.