Was ist und wie verwendet man die jQuery on() Methode?

jQuery ist eine Javascript-Bibliothek, die es ermöglicht, die Interaktion mit HTML-Dokumenten zu vereinfachen, den DOM-Baum zu manipulieren, Ereignisse zu behandeln, Animationen zu entwickeln und Interaktion mit der Technik hinzuzufügen AJAX zu Webseiten.
Seit Version 1.7 von jQuery haben wir die Methode on(), die uns alle notwendigen Funktionen bietet, um Ereignisse zu verwalten. Dank dieser Methode brauchen wir nicht mehr das alte bind (), live () oder delegieren (), aber auch blur (), focus (), click (), hover () und andere.
Genau wie on () haben wir das Gegenteil, off (), das die mit on () zugewiesenen Ereignisse entfernt.
Wir werden eine Reihe von Beispielen sehen, um die Methode on() besser zu verstehen.
Angenommen, wir möchten eine Funktion ausführen, wenn auf eine Schaltfläche geklickt wird:

 (Funktion () {$ ('Schaltfläche'). Klick (Funktion () {// Code zum Ausführen});}) ();

Es ist so, als würden wir es traditionell mit Klick () tun. Aber wenn wir uns den jQuery-Code ansehen, sehen wir, dass tatsächlich die Methode on() aufgerufen wird. Am schnellsten geht es also:

 (Funktion () {$ ('Schaltfläche'). on ('Klick', Funktion () {// auszuführender Code});}) ();

Dies ist der direkteste Weg. Und das gleiche gilt für andere Methoden wie change (), hover (), mouseenter (), etc … (eigentlich hover () was es tut, ist mouseenter () und mouseleave (), die wiederum die on ()-Methode aufrufen
Schauen wir uns jQuery an. Wenn wir Version 1.7 oder höher herunterladen und sich den Code ansehen, sehen wir Folgendes:

 jQuery.each (("Blur Focus Focusin Focusout Load Resize Scroll Unload Click dblclick Mousedown Mouseup Mousemove Mouseover Mouseout Mouseenter Mouseleave Change Select Submit Keydown Keypress KeyUp Fehler Kontextmenü"). split (""), f Funktion (i, Name) {// Ereignisbindung behandeln jQuery.fn [name] = function (data, fn) {if (fn == null) {fn = data; data = null;} return arguments.length -> 0? This.on (name, null, data, fn): this.trigger (name);};

Von hier aus interessiert uns nur, dass die Methoden „blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, Submit, Keydown, Keypress, Keyup, Fehler und Kontextmenü "am Ende alle enden in" this.on (name, null, data, fn)".
bind (), live () und delegieren ()
In der Vergangenheit wurde es auch gemacht:

 (function () {$ ('button').bind ('click', function () {// Code, der ausgeführt wird, wenn der Button angeklickt wird});}) ();

Oder wenn wir möchten, dass das Ereignis auch nach dem Hinzufügen neuer "Schaltflächen" -Elemente zum Dokument funktioniert, verwenden wir die Methode live():

 (Funktion () {$ ('Schaltfläche'). Live ('Klick', Funktion () {// Code, der ausgeführt wird, wenn die Schaltfläche angeklickt wird});}) ();

Anschließend führte jQuery "delegate()" ein, mit dem wir ein Ereignis einem Kontext zuordnen konnten. Zum Beispiel, wenn sich die Schaltfläche in einem div mit der Klasse "container" befindet (oder sein wird, wenn sie später hinzugefügt wird):

 (function () {$ ('div.container').delegate ('button', 'click', function () {// Code, der ausgeführt werden soll, wenn die Schaltfläche angeklickt wird});}) ();

Aber wie bei den vorherigen rufen beide Methoden bind(), live() oder Delegate() nur die Methode on() auf.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben