jQuery advantages/differences in .trigger() vs .click()

Question

In terms of performance, what are the gains (or just differences) between:

$('.myEl').click();

and

$('.myEl').trigger('click');

Are there any at all?

score 68 · Accepted Answer · edited May 23 '17 at 12:18

68

This is the code for the click method:

jQuery.fn.click = function (data, fn) {
    if (fn == null) {
        fn = data;
        data = null;
    }

    return arguments.length > 0 ? this.on("click", null, data, fn) : this.trigger("click");
}

as you can see; if no arguments are passed to the function it will trigger the click event.

Using .trigger("click") will call one less function.

And as @Sandeep pointed out in his answer .trigger("click") is faster:

As of 1.9.0 the check for data and fn has been moved to the .on function:

$.fn.click = function (data, fn) {
    return arguments.length > 0 ? this.on("click", null, data, fn) : this.trigger("click");
}

edited May 23 '17 at 12:18

Community

1
1

answered Mar 12 '12 at 11:56

Andreas Louv

46,145
13
104
123

1

Just to add ... I recently tried using .click() and if failed in Chrome (worked fine in FF and Safari). I switched to using .trigger('click') and it then worked in Chrome as well. – Graeck Apr 05 '13 at 00:17
2

@Graeck I'm pretty sure you have a mistake in that code.... Cause all logic points at what you are saying is nonsense... Sorry .. – Andreas Louv Apr 05 '13 at 11:44
1

@Graeck I've had that same thing happen to me too, `.click()` was a shortcut for `.bind()` in older versions of jQuery, that may have been why.. – Cooper Maruyama Aug 15 '14 at 06:27

score 5 · Answer 2 · answered Mar 12 '12 at 11:55

i think that

$('.myEl').trigger('click');

is better because it saves you a function call as $('.myEl').click(); just calls that funciton. Look at the code from jQuery source

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 ) {
        if ( fn == null ) {
            fn = data;
            data = null;
        }

        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
                    //here they call trigger('click'); if you provide no arguments
            this.trigger( name );
    };

    if ( jQuery.attrFn ) {
        jQuery.attrFn[ name ] = true;
    }

    if ( rkeyEvent.test( name ) ) {
        jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
    }

    if ( rmouseEvent.test( name ) ) {
        jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
    }
});

score 3 · Answer 3 · answered Mar 12 '12 at 11:54

3

for performance kind .check here.. http://jsperf.com/trigger-vs-not-trigger Both are almost same...click() is shorthand of trigger('click').

answered Mar 12 '12 at 11:54

sandeep

2,244
1
23
38

This isn't actually true. Saying that it's shorthand would imply that `click()` were written as `jquery.fn.click = function() { return trigger("click") }`, but it's not (see answer by @andlrc). There is some code run before `click()` potentially calls `trigger("click")`, which is a long enough wait, apparently, for FireFox to determine that the click event is programmatically applied, and won't honor it. `trigger("click")` is a fraction of a second faster. I just ran into the same problem mentioned by @Graeck in their comment, and using `trigger("click")` works, where `click()` did not. – Sean Kendle Jan 31 '17 at 19:48

score 2 · Answer 4 · answered Mar 12 '12 at 11:53

2

Check http://api.jquery.com/click/ :

In the third variation, when .click() is called without arguments, it is a shortcut for .trigger("click").

It seems they are the same.

answered Mar 12 '12 at 11:53

Pawel Zubrycki

2,703
17
26

jQuery advantages/differences in .trigger() vs .click()

4 Answers4

Linked