Unterschied zwischen .on ('click') und .click ()

526

Gibt es einen Unterschied zwischen dem folgenden Code?

$('#whatever').on('click', function() {
     /* your code here */
});

und

$('#whatever').click(function() {
     /* your code here */
});

jquery click bgcode
quelle

761

Ich denke, der Unterschied liegt in den Nutzungsmustern.

Ich würde es vorziehen , .onüber .clickweil erstere kann weniger Speicher und arbeiten für dynamisch hinzugefügte Elemente verwenden.

Betrachten Sie das folgende HTML:

<html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>

wo wir neue Buttons über hinzufügen

$("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});

und will "Alarm!" einen Alarm anzeigen. Wir können dafür entweder "click" oder "on" verwenden.

Wenn wir verwenden `click`

$("button.alert").click(function() {
    alert(1);
});

Mit dem oben genannten wird ein separater Handler für jedes einzelne Element erstellt , das dem Selektor entspricht. Das bedeutet

Viele übereinstimmende Elemente würden viele identische Handler erstellen und somit den Speicherbedarf erhöhen
Dynamisch hinzugefügte Elemente haben keinen Handler - dh im obigen HTML-Code wird der neu hinzugefügte "Alert!" Schaltflächen funktionieren nur, wenn Sie den Handler neu binden.

Wenn wir verwenden `.on`

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

mit dem oben genannten einen einzigen Handler für alle Elemente , die zu Ihrer Auswahl passen, einschließlich der dynamisch erstellten.

... ein weiterer Grund zu verwenden `.on`

Wie Adrien weiter unten kommentierte, .onsind Ereignisse mit Namespace ein weiterer Grund für die Verwendung .

Wenn Sie einen Handler hinzufügen, .on("click", handler)entfernen Sie ihn normalerweise, .off("click", handler)wodurch genau dieser Handler entfernt wird. Dies funktioniert natürlich nur, wenn Sie einen Verweis auf die Funktion haben. Was ist, wenn Sie dies nicht tun? Sie verwenden Namespaces:

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

mit Entbindung über

$("#element").off("click.someNamespace");

andreister
quelle

2

Was ist mit: $ ('button.alert'). On ('click', function () {alert (1);}); ?

Matthew

8

@andreister: Korrigieren Sie mich, wenn ich falsch liege, aber ich glaube, dass ein weiterer Vorteil die Verwendung von Namespaces bei der Verwendung ist on('click' ...), siehe stackoverflow.com/a/3973060/759452, d. h. on('click.darkenallothersections' ...)und gleichzeitig haben on('click.displaynextstep' ...), dann kann ich nur diejenige lösen, die ich mit benutze.unbind('click.displaynextstep')

Adrien Be

Ich glaube nicht, dass für jedes Element, das dem Selektor entspricht, ein separater Handler erstellt wird. Ich denke, dass 1 Handler erstellt werden würde, aber dass der Overhead dadurch entsteht, dass dieser Handler an mehrere Elemente gebunden und alle diese Elemente überwacht werden. Zumindest habe ich das nicht in der Dokumentation gefunden.

Trace

7

Kann jemand erklären, warum .on für dynamisch hinzugefügte Elemente arbeiten kann, aber .click nicht?

MengT

2

on()ist der Trend in jQuery. Ich musste auf aktualisieren $(window).load(function() {});, $(window).on("load", function (e) {})als ich auf jQuery 3 aktualisiert habe.

Victor Stoddard

37

Gibt es einen Unterschied zwischen dem folgenden Code?

Nein, es gibt keinen funktionalen Unterschied zwischen den beiden Codebeispielen in Ihrer Frage. .click(fn)ist eine "Verknüpfungsmethode" für .on("click", fn). Aus der Dokumentation für.on() :

Für einige Ereignisse gibt es Kurzmethoden, mit denen Ereignishandler .click()angehängt oder ausgelöst werden können. Eine vollständige Liste der Kurzmethoden finden Sie in der Ereigniskategorie .

Beachten Sie, dass es sich dadurch .on()unterscheidet, .click()dass delegierte Ereignishandler durch Übergeben eines selectorParameters erstellt werden können, während .click()dies nicht der Fall ist. Wenn .on()es ohne selectorParameter aufgerufen wird, verhält es sich genauso wie .click(). Wenn Sie eine Ereignisdelegierung wünschen, verwenden Sie .on().

gilly3
quelle

4

Was ist mit dem Leistungsproblem, auf das mein @andreister hingewiesen hat?

Rubo77

@ rubo77 bestenfalls vernachlässigbar. Wir brauchen einstellige Millisekunden.

Rory McCrossan

1

@RoryMcCrossan das ist eine große Sache für mich - ich suche das, weil ich bis zu 3000 Fragen auf einer Seite habe, die Ereignisse benötigen. Mit jeweils einem Milisec dauert die Ausführung meiner Seite 3 Sekunden länger. Ihr Kommentar ist für große Listen nicht hilfreich.

Randy

11

Das größere Problem ist, warum Sie 3000 Fragen auf einer Seite haben. Wenn Sie guten UI-Mustern folgen, sollten Sie niemals so viele Informationen auf einer Seite haben. Schauen Sie sich Paging oder faules Laden an. Selbst die Verwendung der Ereignisdelegation, um einen einzigen Ereignishandler für all diese Elemente zu haben, wäre besser.

Rory McCrossan

5

@ rubo77 - Der Leistungsgewinn wird nur bei Verwendung der Ereignisdelegierung durch Übergabe eines selectorParameters angezeigt . Wenn Sie .on()ohne selectorParameter aufrufen , gibt es keine Leistungsverbesserung gegenüber der Verwendung .click().

gilly3

23

.on()ist die empfohlene Methode, um alle Ihre Ereignisbindungen ab jQuery 1.7 durchzuführen. Es rollt alle Funktionen von beiden .bind()und .live()in eine Funktion, die das Verhalten ändert, wenn Sie verschiedene Parameter übergeben.

Wie Sie Ihr Beispiel geschrieben haben, gibt es keinen Unterschied zwischen den beiden. Beide binden einen Handler an das clickEreignis von #whatever. on()bietet zusätzliche Flexibilität, damit Sie Ereignisse, die von Kindern von ausgelöst werden, #whateveran eine einzelne Handlerfunktion delegieren können , wenn Sie dies wünschen.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

Interrobang
quelle

"Binden Sie an alle Links in #was auch immer, auch an neue, die später erstellt wurden." Ist das nicht genau das, was es .live()tut? Dies scheint auch im Widerspruch zu den anderen Antworten zu stehen, die besagen, dass es nur die Funktionalität von .click()hat und daher nicht für zukünftige Ereignisse gilt.

BG-Code

3

@babonk - Dies widerspricht nicht den anderen Antworten, denn wie Interrobang im ersten Absatz sagte, .on()kann es tun, was .click()tut und was .bind()und .live()tun - es hängt davon ab, mit welchen Parametern Sie es aufrufen. (Einige andere Antworten erwähnten dies ebenfalls.) Beachten Sie jedoch, dass "An alle Links in #whatever binden" nicht das .live()ist, was es tut, sondern das, was es .delegate()tut. .live()bindet an alle im Inneren, documentanstatt Sie den Container angeben zu lassen. Hinweis .live()ist ab jQuery 1.7 ebenfalls veraltet.

nnnnnn

+1 für delegierte Ereignisse: "Durch Auswahl eines Elements, das zum Zeitpunkt des Anhängens des delegierten Ereignishandlers garantiert vorhanden ist, können Sie delegierte Ereignisse verwenden, um zu vermeiden, dass Ereignishandler häufig angehängt und entfernt werden müssen." api.jquery.com/on

jimasp

19

Wie in den anderen Antworten erwähnt:

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

Beachten Sie jedoch, dass dies .on()mehrere andere Parameterkombinationen unterstützt, die .click()dies nicht tun, sodass die Ereignisdelegierung (Ersetzen .delegate()und .live()) verarbeitet werden kann.

(Und offensichtlich gibt es andere ähnliche Verknüpfungsmethoden für "Keyup", "Focus" usw.)

Der Grund, warum ich eine zusätzliche Antwort poste, ist zu erwähnen, was passiert, wenn Sie .click()ohne Parameter aufrufen :

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

Beachten Sie, dass Sie bei .trigger()direkter Verwendung auch zusätzliche Parameter oder ein jQuery-Ereignisobjekt übergeben können, mit denen Sie nicht arbeiten können .click().

Ich wollte auch erwähnen, dass, wenn Sie sich den jQuery-Quellcode (in jquery-1.7.1.js) ansehen, Sie sehen, dass die Funktion .click()(oder .keyup()usw.) intern tatsächlich .on()oder aufruft .trigger(). Dies bedeutet natürlich, dass Sie sicher sein können, dass sie tatsächlich das gleiche Ergebnis erzielen, aber es bedeutet auch, dass die Verwendung .click()ein wenig mehr Aufwand verursacht - unter den meisten Umständen nichts, worüber Sie sich Sorgen machen oder darüber nachdenken müssen, aber theoretisch könnte dies unter außergewöhnlichen Umständen von Bedeutung sein.

BEARBEITEN: Beachten .on()Sie schließlich, dass Sie mehrere Ereignisse in einer Zeile an dieselbe Funktion binden können, z.

$("#whatever").on("click keypress focus", function(){});

nnnnnn
quelle

Sind nicht beide Methoden in den Speicher geladen, um sie zu verwenden? Also ist es egal? Und für die Lesbarkeit ist es vielleicht handlicher?

Vince V.

@VinceV. - Ja. Bei nicht delegierten "Standard" -Ereignishandlern tun beide Methoden dasselbe und der Leistungsunterschied ist vernachlässigbar. Welche Methode Sie verwenden, hängt also wirklich von Ihren persönlichen Vorlieben ab. (Ich würde normalerweise wählen .click().)

nnnnnn

9

Nein, gibt es nicht.
Der Punkt on()ist die anderen Überladungen und die Fähigkeit, Ereignisse zu verarbeiten, die keine Verknüpfungsmethoden haben.

SLaks
quelle

1

@arigold: Das sind die anderen Überladungen.

SLaks

9

Sie scheinen gleich zu sein ... Dokumentation über die Funktion click () :

Diese Methode ist eine Verknüpfung für .bind ('click', Handler)

Dokumentation über die Funktion on () :

Ab jQuery 1.7 bietet die .on () -Methode alle Funktionen, die zum Anhängen von Ereignishandlern erforderlich sind. Hilfe beim Konvertieren von älteren jQuery-Ereignismethoden finden Sie unter .bind (), .delegate () und .live (). Informationen zum Entfernen von mit .on () gebundenen Ereignissen finden Sie unter .off ().

Dana
quelle

Beide Ansichten sollten zusammengeführt werden. Click () ist eine Verknüpfung für .Bind () und .On () ... Gemäß JQUERY 1.7.0 + ist es auch eine Verknüpfung für Trigger ('click'). [ api.jquery.com/click/]

Dhanasekar

Dies ist eine ziemlich einfache Erklärung aus den Dokumenten, aber die folgende Antwort enthält ein gutes Beispiel dafür, warum einer in .clickvs besser ist als der andere.on

phatskat

@phatskat - ich stimme dir zufällig zu :)

Dana

8

.click Ereignisse funktionieren nur, wenn das Element gerendert wird, und werden nur an Elemente angehängt, die geladen werden, wenn das DOM bereit ist.

.on Ereignisse werden dynamisch an DOM-Elemente angehängt. Dies ist hilfreich, wenn Sie ein Ereignis an DOM-Elemente anhängen möchten, die auf Ajax-Anforderung oder etwas anderem gerendert werden (nachdem das DOM bereit ist).

Ramesh Kumar
quelle

5

Hier erhalten Sie eine Liste mit verschiedenen Möglichkeiten, das Klickereignis anzuwenden. Sie können entsprechend als geeignet auswählen oder, wenn Ihr Klick nicht funktioniert, einfach eine Alternative aus diesen ausprobieren.

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

Mustkeem K.
quelle

3

Sie haben jetzt click () veraltet, also am besten mit on ('click')

zwei Schuhe
quelle

Was machen Sie also, wenn Sie jetzt das alte click () -Verhalten möchten?

BG-Code

1

Soweit aus dem Internet und einigen Freunden gelernt, wird .on () verwendet, wenn Sie Elemente dynamisch hinzufügen. Aber als ich es auf einer einfachen Anmeldeseite verwendete, auf der das Klickereignis AJAX an node.js senden und bei der Rückkehr neue Elemente anhängen sollte, begann es, Multi-AJAX-Aufrufe aufzurufen. Als ich es in click () geändert habe, ist alles richtig gelaufen. Eigentlich war ich vorher nicht mit diesem Problem konfrontiert.

Alper Bilgil
quelle

0

NEUE ELEMENTE

Als Ergänzung zu den oben genannten umfassenden Antworten, um kritische Punkte hervorzuheben, wenn der Klick an neue Elemente angehängt werden soll:

Elemente, die vom ersten Selektor ausgewählt wurden, z. B. $ ("body"), müssen zum Zeitpunkt der Deklaration vorhanden sein, da sonst nichts angehängt werden kann.
Sie müssen die drei Argumente in der Funktion .on () verwenden, einschließlich des gültigen Selektors für Ihre Zielelemente als zweites Argument.

Astra Bär
quelle

-1

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

es ist effektiver als $ ('. UPDATE'). click (function () {});
Es kann weniger Speicher verbrauchen und für dynamisch hinzugefügte Elemente arbeiten.
Einige Zeit dynamisch abgerufene Daten mit der Schaltfläche Bearbeiten und Löschen erzeugen zum Zeitpunkt der Bearbeitung oder Löschung von $(document).on('click','.UPDATE',function(){ });Daten von Zeilendaten in Form kein JQuery-Ereignis . Diese Zeit funktioniert effektiv wie die gleichen abgerufenen Daten mithilfe von jquery. Schaltfläche funktioniert zum Zeitpunkt der Aktualisierung oder Löschung nicht:

Devang Hire
quelle

$ (document) .on ('click', '. UPDATE', function () {}); 1) es ist effektiver als $ ('. UPDATE'). Click (function () {}); 2) Es kann weniger Speicher verbrauchen und für dynamisch hinzugefügte Elemente arbeiten. 3) Einige Zeit dynamisch abgerufene Daten mit der Schaltfläche Bearbeiten und Löschen erzeugen kein JQuery-Ereignis zum Zeitpunkt des Bearbeitens oder Löschens von Daten von Zeilendaten in Form, diesmal $ (Dokument) .on ('click', '. UPDATE', function () {}); funktioniert effektiv. [wie die gleichen abgerufenen Daten mit jquery. Schaltfläche funktioniert zum Zeitpunkt der Aktualisierung oder Löschung nicht

Devang Hire

Unterschied zwischen .on ('click') und .click ()

Antworten:

Wenn wir verwenden click

Wenn wir verwenden .on

... ein weiterer Grund zu verwenden .on

Wenn wir verwenden `click`

Wenn wir verwenden `.on`

... ein weiterer Grund zu verwenden `.on`