Was ist der Unterschied zwischen “on” und “live” oder “bind”?

In jQuery v1.7 wurde eine neue Methode hinzugefügt. Aus der Dokumentation:

‘Die .on () -Methode hängt Ereignishandler an die aktuell ausgewählte Gruppe von Elementen im jQuery-Objekt an. Ab jQuery 1.7 bietet die .on () -Methode alle functionen, die zum Anhängen von Ereignishandlern erforderlich sind. ‘

Was ist der Unterschied zu live und bind ?

on() ist ein Versuch, die meisten Ereignisbindungsfunktionen von jQuery in einen zusammenzufassen. Dies hat den zusätzlichen Vorteil, die Ineffizienzen mit live vs delegate aufzuräumen. In zukünftigen Versionen von jQuery werden diese Methoden entfernt und nur noch one und one übrig gelassen.

Beispiele:

 // Using live() $(".mySelector").live("click", fn); // Equivalent `on` (there isn't an exact equivalent, but with good reason) $(document).on("click", ".mySelector", fn); 
 // Using bind() $(".mySelector").bind("click", fn); // Equivalent `on` $(".mySelector").on("click", fn); 
 // Using delegate() $(document.body).delegate(".mySelector", "click", fn); // Equivalent `on` $(document.body).on("click", ".mySelector", fn); 

Intern ordnet jQuery all diese Methoden und Shorthand-Event-Handler-Setter der on() -Methode zu, was darauf hinweist, dass Sie diese Methoden ab jetzt ignorieren und nur verwenden sollten:

 bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, 

Siehe https://github.com/jquery/jquery/blob/1.7/src/event.js#L965 .

on ist in der Natur sehr nahe zu delegate . Warum also nicht Delegat verwenden? Es ist weil es nicht alleine kommt. Es gibt ein Unbind-Ereignis und ein Ereignis, das nur einmal ausgeführt werden soll. Dies ist das “Paket” einer neuen Veranstaltung.

Das Hauptproblem von live ist, dass es sich an “window” anlehnt und ein click -Ereignis (oder ein anderes Ereignis) auf ein Element tief innerhalb der Seitenstruktur (dom) zwingt, um oben auf der Seite zu “blubbern” Event-Handler bereit, damit umzugehen. Auf jeder Ebene müssen alle Event-Handler überprüft werden, dies kann sich schnell addieren, wenn Sie eine tiefe

(

)

Also, bind , wie click , wie andere Shortcut-Ereignismappen direkt an das Ereignisziel anhängen. Wenn Sie eine Tabelle mit, sagen wir, 1000 Zeilen und 100 Spalten haben, und jede der 100’000 Zellen enthält ein Kontrollkästchen, das Sie anklicken möchten. Das Anhängen von 100’000 Event-Handlern wird beim Laden der Seite viel Zeit in Anspruch nehmen. Das Erstellen eines einzelnen Ereignisses auf Tabellenebene und die Verwendung der Ereignisdelegierung ist mehrere Größenordnungen effizienter. Das Ereignisziel wird zur Ausführungszeit des Ereignisses abgerufen. ” this ” wird die Tabelle sein, aber ” event.target ” wird Ihr übliches ” this ” in einer click function sein. Das Schöne an on ist, dass ” this ” immer das Ereignisziel ist und nicht der Container, an den es angehängt ist.

Mit der .on Methode ist es möglich, .live , .delegate und .bind mit derselben function .delegate , aber mit .live() nur .live() möglich (Ereignisse werden delegiert).

jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );

jQuery("#example").delegate( ".examples", "click", fn ) jQuery( "#example" ).on( "click", ".examples", fn ) jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )

jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )

Ich kann dies direkt von jQuery Quelle bestätigen:

 bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, 

jQuery (this.context)? this.context === document in den meisten Fällen

(Mein Anfangssatz ergab mehr Sinn, bevor Sie die Frage änderten. Ursprünglich hatten Sie gesagt: “Was ist der Unterschied zum live ?”)

on ist mehr wie delegate als es ist wie live , es ist im Grunde eine vereinheitlichte Form von bind und delegate (in der Tat, das Team sagte, sein Zweck ist “… um alle Möglichkeiten zu verbinden, Ereignisse an ein Dokument anzuhängen …” ) .

live ist grundsätzlich on das Dokument als Ganzes angehängt (oder delegate ). Es ist seit Version 1.7 veraltet, zugunsten von on oder delegate . Ich gehe davon aus, dass Code nur mit on , anstatt bind oder delegate (oder live ) zu verwenden …

In der Praxis können Sie also:

  1. Verwenden Sie on wie bind :

     /* Old: */ $(".foo").bind("click", handler); /* New: */ $(".foo").on("click", handler); 
  2. on ähnlichen delegate (Ereignisdelegierung in einem bestimmten Element):

     /* Old: */ $("#container").delegate(".foo", "click", handler); /* New: */ $("#container").on("click", ".foo", handler); 
  3. Verwenden Sie on Like live (Ereignisdelegierung, die im Dokument verankert ist):

     /* Old: */ $(".foo").live("click", handler); /* New: */ $(document).on("click", ".foo", handler); 

live ist die Abkürzung für .on () jetzt

 //from source http://code.jquery.com/jquery-1.7.js live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; } 

auch dieser Beitrag kann nützlich für Sie sein http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Es gibt keinen für den grundlegenden Anwendungsfall. Diese zwei Linien sind funktional gleich

 $( '#element' ).bind( 'click', handler ); $( '#element' ).on( 'click', handler ); 

.on () kann auch eine Ereignisdelegierung durchführen und wird bevorzugt.

.bind () ist jetzt nur ein Alias ​​für .on (). Hier ist die Definition der Bind-function in 1.7.1

 bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, 

Die Idee zum Hinzufügen von .on () bestand darin, eine vereinheitlichte Ereignis-API zu erstellen, anstatt mehrere functionen für das Bindungsereignis zu haben. .on () ersetzt .bind (), .live () und .delegate ().

Etwas, auf das Sie achten sollten, wenn Sie die Event-Handler mit dem Element verknüpfen möchten – achten Sie darauf, an welches Element der Handler angehängt wurde!

Wenn Sie beispielsweise Folgendes verwenden:

 $('.mySelector').bind('click', fn); 

Sie erhalten die Ereignishandler mit:

 $('.mySelector').data('events'); 

Aber wenn du folgendes verwendest:

 $('body').on('click', '.mySelector', fn); 

Sie erhalten die Ereignishandler mit:

 $('body').data('events'); 

(Im letzten Fall wird das relevante Ereignisobjekt selector = “. mySelector” haben)