Frage jQuery binding Klicken Sie auf "Best Practices für Ereignisse"


In letzter Zeit habe ich beim Klicken auf Ereignisse in jQuery gefragt, ob ich die jQuery-Verknüpfung verwenden soll click() oder wenn ich das spezifizieren sollte .on('click', ...) ruf mich an.

Das .klicken(). Funktion in jQuery ist nur eine Abkürzung. Für mich ist es sinnvoll zu verwenden, da jQuery alles hinter den Kulissen abwickelt, wobei die bevorzugte Methode für die verwendete jQuery-Version verwendet wird. Wenn ich meine Skripte von jQuery 1.6 -> 1.7 aktualisiert habe, weiß ich, dass alle meine click()Es ging von einer Abkürzung zu bind() zu den bevorzugten on() Methode. Dies allein scheint Grund genug zu sein, die Abkürzungen zu verwenden.

...jedoch....

Trevor Burnham, den ich sehr respektiere, sagt in seinem eBook Asynchrones Javascript dass er

... bevorzugen (s), die stärkere Bindung / on) konsistent zu verwenden (über Klick)

Das verwirrt mich, und ich frage mich, warum bin / on "mächtiger" ist.

Was haben Sie als Best Practices beim Binden von Ereignissen mit Verknüpfungen in jQuery gefunden? Verwenden Sie die Verknüpfung oder tun Sie es selbst?


16
2017-07-19 00:07


Ursprung


Antworten:


Ich denke, es hat mehr mit allem zu tun als mit der persönlichen Vorliebe und der Lesbarkeit von Code. 

So weit geht ein Mächtiger .on können Sie Ereignisse delegieren, während Verknüpfungen immer direkt auf dem Element ausgeführt werden. Beispielsweise $('body').on('click', '.button', function(){}); wird für jeden funktionieren .button Element auch diejenigen, die nachträglich mit Ajax oder anderweitig hinzugefügt wurden. Während die Verknüpfung dies nicht tun kann $('.button').click(function(){}); ist die einzige Möglichkeit, einen Listener hinzuzufügen .button und hat keine Delegation, also .button Elemente, die später hinzugefügt werden, haben diese Bindung nicht.

Direkte nicht delegierte Ereignisse (wie Verknüpfungen) für mehrere Elemente sind ebenfalls etwas weniger effizient als delegierte Ereignisse für ein übergeordnetes Objekt. Zum Beispiel: Sagen wir es sind 15 .button Elemente auf der Seite, $('.button').click(... Durchläuft alle 15 Elemente und fügt jedem einen Ereignis-Listener hinzu; jedoch $('#parentElem').on('click', '.button', ... wird einfach einen einzelnen Ereignis-Listener anhängen #parentElem Das prüft das Ziel, also einen Attach und einen Listener, gegen eine Schleife und 15 Listener.

Und schlussendlich, .on hat den Vorteil, dass Sie eine Funktion aus mehreren Ereignissen an ein Element anhängen können, was beispielsweise bei Verknüpfungen nicht möglich ist: $('.button').on('click mouseover keyup', ... Die Funktion wird mit Klick, Mouseover oder Keyup ausgelöst!


Lass es nochmal sagen es sind 15 .button Elemente in einem div namens #parent

Shortcut-Handler:

 $('.button').click(turnRed);
 $('.button').mouseover(turnRed);
 $('.button').keyup(turnRed);

 function turnRed(){
      $(this).css('color','red');
 }
  • 4 jQuery-Objekte erstellt (ja ich weiß, Sie könnten es auf 2 Objekte zwischenspeichern, aber das ist ein Beispiel)
  • Jeweils 3 Element-Loops zu je 15, also jQuery trifft hier 45 mal auf Elemente und fügt Listener hinzu
  • 45 Gesamtereignis-Listener
  • Zukunft .button Elemente, die der Szene hinzugefügt wurden, nicht turnRed

.on Handler:

 $('#parent').on('click mouseover keyup', '.button', turnRed);

 function turnRed(){
      $(this).css('color','red');
 }
  • 2 jQuery-Objekte erstellt
  • Keine Elementschleife, also trifft jQuery Elemente einmal
  • 3 Gesamtereignis-Listener
  • Zukunft .button Elemente, die zur Szene hinzugefügt werden, werden in der Tat turnRed

Hier .on hat eindeutig den Vorteil


Wenn Ihre Situation einfacher ist als dies, dann ist der Vorteil von .onkann keinen Unterschied für Sie machen, und die Abkürzung wird bevorzugt, da sie besser lesbar ist.

$('#button').click(... ist fast identisch mit $('#button').on('click', ... (siehe @ Fabrício Mattés Antwort) und wenn wir nur einen Listener zu einem Event hinzufügen möchten, .onDie Macht ist ein strittiger Punkt.

Persönlich, weil es Zeiten gibt, in denen ich den Vorteil haben möchte .on Ich benutze immer .on nur um konsequent zu sein.


44
2017-07-19 00:13



Sie können einen kurzen Blick auf die Quelle und sehen Sie selbst, was Ihr Funktionsaufruf tatsächlich macht.

In jQuery-Objekten ' extend (Zeile 3754), jQuery iteriert über alle diese Methodennamen in Zeile 3909:

Unschärfe Fokus Fokus Fokus Load Größe ändern Scroll Entladen klicken dblclick   mousedown mouseup mousemove mouseover mouseout mouseenter mouselave   change submit keydown keypress keyup error kontextmenü

Erstellen der Kurzschreibweisen, die den Aufruf aufrufen .on Methode für die angegebene Methode, ohne ein Selektor-Attribut zu übergeben, wenn diese Methoden aufgerufen werden (Zeile 3921):

this.on( name, null, data, fn )

Was nur bedeutet, dass es sein wird keine Ereignisdelegierung bewirken.


Was haben Sie als Best Practices beim Binden von Ereignissen mit Verknüpfungen in jQuery gefunden? Verwenden Sie die Verknüpfung oder tun Sie es selbst?

Der einzige Unterschied zwischen dem Anrufen

$(selector).eventname(function(){...})

Und

$(selector).on('eventname', function(){...})

Ist das, dass die Shorthand-Methode den Overhead eines anderen Funktionsaufrufs hat (was vernachlässigbar minimal ist).

Aktualisieren: Beim Erstellen eines benutzerdefinierten Builds von jQuery mit Grunt können die Kurzschreibmethoden mit der Option ausgeschlossen werden custom:-event-alias Parameter für einen noch kleineren Build (Dokumente hier). Allerdings bleibe ich persönlich bei den CDN-Builds.


Um zu erfahren, wie die Ereignisdelegierung funktioniert und wann dies bevorzugt wird, aktivieren Sie das Kontrollkästchen Dokumente und @ Fresheyeballs Antwort.


1
2017-07-19 00:46