jQuery Vorteile / Unterschiede in .trigger () vs .click ()

72

Was sind in Bezug auf die Leistung die Gewinne (oder nur Unterschiede) zwischen:

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

und

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

Gibt es überhaupt welche?

benhowdle89
quelle

Antworten:

61

Dies ist der Code für die clickMethode :

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");
}

Wie du siehst; Wenn keine Argumente an die Funktion übergeben werden, wird das Klickereignis ausgelöst.


Mit .trigger("click")wird eine Funktion weniger aufgerufen.

Und wie @Sandeep in seiner Antwort hervorhob, .trigger("click")geht es schneller:


Ab 1.9.0 wurde die Prüfung auf dataund fnin die .onFunktion verschoben :

$.fn.click = function (data, fn) {
    return arguments.length > 0 ? this.on("click", null, data, fn) : this.trigger("click");
}
andlrc
quelle
1
Nur zum Hinzufügen ... Ich habe kürzlich versucht, .click () zu verwenden, und wenn dies in Chrome fehlgeschlagen ist (hat in FF und Safari einwandfrei funktioniert). Ich habe auf .trigger umgestellt ('click') und es hat dann auch in Chrome funktioniert.
Graeck
2
@Graeck Ich bin mir ziemlich sicher, dass Sie einen Fehler in diesem Code haben .... Weil alle logischen Punkte an dem, was Sie sagen, Unsinn sind ... Entschuldigung ..
andlrc
1
@Graeck Ich hatte das gleiche auch mit mir passiert, .click()war eine Abkürzung für .bind()in älteren Versionen von jQuery, das könnte der Grund gewesen sein ..
Cooper Maruyama
4

ich denke, dass

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

ist besser, weil es Ihnen einen Funktionsaufruf erspart, da $('.myEl').click();nur diese Funktion aufgerufen wird. Schauen Sie sich den Code aus der jQuery-Quelle an

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;
    }
});
Nicola Peluchetti
quelle
3

Für Performance-Art .check hier .. http://jsperf.com/trigger-vs-not-trigger Beide sind fast gleich ... click () ist eine Abkürzung für Trigger ('click').

Sandeep
quelle
Das ist eigentlich nicht wahr. Zu sagen, dass es eine Abkürzung ist, würde bedeuten, dass click()geschrieben wurde als jquery.fn.click = function() { return trigger("click") }, aber es ist nicht (siehe Antwort von @andlrc). Vor click()potenziellen Aufrufen wird Code ausgeführt trigger("click"), was anscheinend lange genug dauert, bis FireFox feststellt, dass das Klickereignis programmgesteuert angewendet wird, und es nicht berücksichtigt. trigger("click")ist ein Bruchteil einer Sekunde schneller. Ich bin gerade auf das gleiche Problem gestoßen, das @Graeck in ihrem Kommentar erwähnt hat, und habe trigger("click")Werke verwendet, wo click()dies nicht der Fall war .
Sean Kendle
2

Überprüfen Sie http://api.jquery.com/click/ :

Wenn in der dritten Variante .click () ohne Argumente aufgerufen wird, ist dies eine Verknüpfung für .trigger ("click").

Es scheint, dass sie gleich sind.

Pawel Zubrycki
quelle