jQuery's .bind () vs. .on ()

Ich habe zwei großartige Artikel gefunden, die über die neue Funktion sprechen .on(): jquery4u.com , elijahmanor.com .

Gibt es eine Möglichkeit, wo das .bind()Still besser zu bedienen ist als .on()?

Zum Beispiel habe ich einen Beispielcode, der so aussieht:

$("#container").click( function( e ) {} )

Sie können feststellen, dass nur ein Element vom Selektor abgerufen wurde und in meinem Fall der <div>Name #containerbereits vorhanden ist, als meine Seite geladen wurde. nicht dynamisch hinzugefügt. Es ist wichtig zu erwähnen, dass ich die neueste Version von jQuery verwende: 1.7.2.

Sollte für dieses Beispiel verwendet .on()werden, anstatt .bind()auch wenn ich die anderen von der .on()Funktion bereitgestellten Funktionen nicht verwende?

Intern wird .binddirekt auf .ondie aktuelle Version von jQuery abgebildet. (Das Gleiche gilt für .live.) Es gibt also einen winzigen, aber praktisch unbedeutenden Leistungseinbruch, wenn Sie .bindstattdessen verwenden.

Allerdings .bindkann von zukünftigen Versionen jederzeit wieder entfernt. Es gibt keinen Grund, weiter zu verwenden, .bindund jeden Grund, .onstattdessen zu bevorzugen .

Diese Snippets funktionieren alle genau gleich:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Sie unterscheiden sich jedoch stark von diesen, die alle dasselbe ausführen:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Der zweite Satz von Ereignishandlern verwendet die Ereignisdelegierung und funktioniert für dynamisch hinzugefügte Elemente. Event-Handler, die Delegierung verwenden, sind auch viel leistungsfähiger. Der erste Satz funktioniert nicht für dynamisch hinzugefügte Elemente und ist für die Leistung viel schlechter.

Die on()Funktion von jQuery führt keine neuen Funktionen ein, die noch nicht vorhanden waren. Es handelt sich lediglich um einen Versuch, die Ereignisbehandlung in jQuery zu standardisieren (Sie müssen sich nicht mehr zwischen Live, Binden oder Delegieren entscheiden).

Die direkten Methoden und .delegatesind APIs überlegen .onund es besteht keine Absicht, sie zu verwerfen.

Die direkten Methoden sind vorzuziehen, da Ihr Code weniger streng typisiert wird. Sie erhalten sofort eine Fehlermeldung, wenn Sie einen Ereignisnamen anstelle eines stillen Fehlers falsch eingeben. Meiner Meinung nach ist es auch einfacher zu schreiben und zu lesen clickalson("click"

Das .delegateist .onaufgrund der Reihenfolge des Arguments überlegen :

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Sie wissen sofort, dass es delegiert ist, weil es heißt, delegieren. Sie sehen auch sofort den Selektor.

Mit .ones ist klar , nicht sofort , wenn es sogar delegiert hat , und Sie müssen Blick auf das Ende für den Wähler:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Jetzt ist die Benennung von .bindwirklich schrecklich und zum Nennwert schlechter als .on. Es .delegatekönnen jedoch keine nicht delegierten Ereignisse ausgeführt werden, und es gibt Ereignisse, die keine direkte Methode haben. In seltenen Fällen kann diese verwendet werden, jedoch nur, weil Sie eine saubere Trennung zwischen delegierten und nicht delegierten Ereignissen vornehmen möchten.

Wenn Sie im Quellcode nachsehen, werden $.fn.bindSie feststellen, dass es sich nur um eine Umschreibfunktion handelt für on:

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

Aus der jQuery-Dokumentation:

Ab jQuery 1.7 ist die Methode .on () die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument. In früheren Versionen wird die Methode .bind () verwendet, um einen Ereignishandler direkt an Elemente anzuhängen. Handler werden an die aktuell ausgewählten Elemente im jQuery-Objekt angehängt, sodass diese Elemente an dem Punkt vorhanden sein müssen, an dem der Aufruf von .bind () erfolgt. Eine flexiblere Ereignisbindung finden Sie in der Diskussion zur Ereignisdelegierung in .on () oder .delegate ().

http://api.jquery.com/bind/

Ab Jquery 3.0 und höher ist .bind veraltet und sie bevorzugen stattdessen die Verwendung von .on. Als @Blazemonger früher antwortete, dass es entfernt werden kann und es sicher ist, dass es entfernt wird. Für die älteren Versionen würde .bind auch intern .on aufrufen und es gibt keinen Unterschied zwischen ihnen. Bitte beachten Sie auch die API für weitere Details.

jQuery API-Dokumentation für .bind ()