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

Ist, gibt es einen Unterschied zwischen dem folgenden code?

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

und

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

InformationsquelleAutor der Frage bgcode | 2012-02-03

  1. 622

    Ich denke, der Unterschied liegt im Verhalten.

    Ich würde lieber .on über .click weil die ehemaligen kann verwenden weniger Speicher, und arbeiten für dynamisch hinzugefügte Elemente.

    Betrachten Sie den folgenden html-Code:

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

    wo wir neue Schaltflächen hinzufügen über

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

    wollen "Alarm!" zu zeigen, eine Warnung. Wir können entweder "auf" oder "auf".

    Wenn wir click

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

    mit den oben genannten, eine separate handler erzeugt wird, für jedes einzelne element , passt der Selektor. Das bedeutet, dass

    1. viele übereinstimmende Elemente schaffen würde, die viele identische Prozeduren und damit zur Erhöhung der Speicherbedarf
    2. dynamisch hinzugefügte Elemente nicht über die hf - sprich, in den oben genannten html die neu hinzugefügte "Alert!" - Tasten nicht funktionieren, es sei denn, Sie binden die handler.

    Wenn wir .on

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

    mit den oben genannten, eine single handler für alle Elemente passend zu Ihrem selector, auch die, die dynamisch erstellt werden.

    ...ein weiterer Grund für die Verwendung .on

    Als Adrien unten kommentiert, ein weiterer Grund für die Verwendung .on ist mit Namespaces Veranstaltungen.

    Wenn Sie fügen Sie einen Ereignishandler mit .on("click", handler) Sie normalerweise Entferne es mit .off("click", handler) die entfernt, sehr hf. Offensichtlich funktioniert dies nur, wenn Sie einen Verweis auf die Funktion, wenn du also was nicht ? Sie namespaces verwenden:

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

    mit unverbindlich über

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

    InformationsquelleAutor der Antwort andreister

  2. 31

    Ist, gibt es einen Unterschied zwischen dem folgenden code?

    Nein, es gibt keinen funktionalen Unterschied zwischen den beiden code-Beispiele in deiner Frage. .click(fn) ist ein "shortcut-Methode" für .on("click", fn). Von die Dokumentation für .auf():

    Gibt es die Kurzform Methoden für einige Veranstaltungen wie .klicken Sie auf(), die verwendet werden können zum befestigen oder trigger event-Handler. Für eine vollständige Liste der Kürzel-Methoden finden Sie in der events Kategorie.

    Beachten Sie, dass .on() unterscheidet sich von .click() im dass es hat die Fähigkeit zu schaffen Delegierte event-Handler, indem eine selector parameter, in der Erwägung, dass .click() nicht. Wenn .on() aufgerufen, ohne eine selector parameter, verhält es sich genau das gleiche wie .click(). Wenn Sie möchten, event-delegation, verwenden Sie .on().

    InformationsquelleAutor der Antwort gilly3

  3. 19

    .on() ist der empfohlene Weg, um alles tun, Ihre Veranstaltung verbindlich wie der jQuery-1.7. Es rollt sich alle Funktionen der beiden .bind() und .live() in einer Funktion verändert Verhalten, wie Sie es passieren verschiedene Parameter.

    Als Sie geschrieben haben, dein Beispiel gibt es keinen Unterschied zwischen den beiden. Beide binden Sie einen handler an das click Falle #whatever. on() bietet zusätzliche Flexibilität, damit Sie zum delegieren der events werden ausgelöst durch Kinder #whatever auf einen einzigen handler-Funktion, wenn Sie wählen.

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

    InformationsquelleAutor der Antwort Interrobang

  4. 15

    Wie erwähnt von den anderen Antworten:

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

    Bemerkte aber, dass .on() unterstützt mehrere andere parameter-Kombinationen, die .click() nicht, wodurch es zu verarbeiten Ereignis-delegation (Installation .delegate() und .live()).

    (Und offensichtlich gibt es andere ähnliche shortcut-Methoden für die "keyup", "focus", etc.)

    Der Grund, ich bin Entsendung eine extra Antwort ist zu erwähnen, was passiert, wenn Sie anrufen .click() ohne Parameter:

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

    Stellt fest, dass, wenn Sie .trigger() direkt können Sie auch zusätzliche Parameter oder ein jQuery-event-Objekt, das Sie nicht tun können, mit .click().

    Wollte ich auch erwähnen, dass wenn man sich den jQuery source code (in jquery-1.7.1.js) wirst du sehen, dass intern die .click() (oder .keyup() usw.) die Funktion wird tatsächlich rufen .on() oder .trigger(). Offensichtlich bedeutet dies, können Sie sicher sein, dass Sie wirklich das gleiche Ergebnis, aber es bedeutet auch, dass mit .click() hat ein klein wenig mehr Aufwand - nicht etwas sorgen zu machen oder sogar denken, in den meisten Fällen, aber theoretisch könnte es egal in außergewöhnlichen Umständen.

    EDIT: Abschließend noch der Hinweis, dass .on() können Sie binden mehrere Veranstaltungen, um die gleiche Funktion in einer Zeile, z.B.:

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

    InformationsquelleAutor der Antwort nnnnnn

  5. 8

    Nein, gibt es nicht.

    Der Punkt, der on() ist seine andere überlastungen, und die Fähigkeit, Ereignisse zu behandeln, die nicht über shortcut-Methoden.

    InformationsquelleAutor der Antwort SLaks

  6. 7

    Scheinen Sie die gleichen zu sein... aus den Unterlagen des klicken Sie auf() Funktion:

    Diese Methode ist eine Abkürzung für .bind('click', handler)

    Dokumentation aus der auf() Funktion:

    Als von jQuery 1.7, die .auf () - Methode liefert alle erforderlichen Funktionen
    zum anfügen von Ereignishandlern. Für die Hilfe bei der Umwandlung von älteren jQuery
    Ereignis-Methoden finden .bind(), .delegate () und .live(). Um Ereignisse zu entfernen
    gebunden mit .auf(), zu sehen .off().

    InformationsquelleAutor der Antwort dana

  7. 4

    .click Veranstaltungen funktionieren nur, wenn das element gerendert wird und sind nur an Elemente, die geladen wird, wenn das DOM bereit ist.

    .on Veranstaltungen sind dynamisch verbunden sind, um DOM-Elemente, welche ist hilfreich, wenn Sie möchten, fügen Sie einen Ereignis-zu DOM-Elementen, die gerendert werden, auf ajax-request oder etwas anderes (nachdem der DOM fertig ist).

    InformationsquelleAutor der Antwort Ramesh kumar

  8. 0

    Soweit ichgelernt von internet und einige Freunde .auf() wird verwendet, wenn Sie dynamisch Elemente hinzufügen. Aber wenn ich es in eine einfache login-Seite, wo Sie auf Fall senden soll AJAX an node.js und an die Rückkehr Anhängen von neuen Elementen, die es angefangen zu rufen, multi-AJAX-Aufrufe. Wenn ich es geändert auf() alles richtig gelaufen. Eigentlich habe ich nicht vor diesem problem vor.

    InformationsquelleAutor der Antwort Alper Bilgil

  9. 0

    Hier erhalten Sie Liste der verschiedenen Möglichkeiten, die sich aus der Anwendung des click-Ereignis. Sie können wählen Sie entsprechend als suaitable oder wenn Sie auf nicht nur arbeiten, versuchen Sie eine alternative aus diese.

    $('.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
})

    InformationsquelleAutor der Antwort Mustkeem

Schreibe einen Kommentar