jQuery ist eine Javascript-Bibliothek, die die Interaktion mit HTML-Dokumenten, die Bearbeitung des DOM-Baums, die Verwaltung von Ereignissen, die Entwicklung von Animationen und das Hinzufügen von Interaktionen mit der AJAX- Technik zu Webseiten vereinfacht.
Seit Version 1.7 von jQuery verfügen wir über die Methode on (), die alle erforderlichen Funktionen zum Verwalten von Ereignissen bietet. Dank dieser Methode benötigen wir nicht mehr die alten Funktionen bind (), live () oder delegate (), sondern weder blur (), focus (), click (), hover () und andere.
Genau wie es on () gibt, haben wir das Gegenteil off (), wodurch die mit on () zugewiesenen Ereignisse eliminiert werden.
Wir werden eine Reihe von Beispielen sehen, um die on () -Methode besser zu verstehen.
Angenommen, wir möchten eine Funktion ausführen, wenn auf eine Schaltfläche geklickt wird:
(function () { $ ('button'). click (function () { // auszuführender Code }); }) ();
Es ist so, als würden wir es traditionell mit click () machen. Wenn wir uns jedoch den jQuery-Code ansehen, werden wir feststellen, dass tatsächlich die Methode on () aufgerufen wird. Am schnellsten ist es also, Folgendes zu tun:
(function () { $ ('button'). on ('click', function () { // auszuführender Code }); }) ();
Dies ist der direkteste Weg. Und das Gleiche gilt für andere Methoden wie change (), hover (), mouseenter (), etc … (tatsächlich hover () heißt das mouseenter () und mouseleave (), die wiederum die Methode on () aufrufen. )
Mal sehen, jQuery. Wenn wir Version 1.7 oder höher herunterladen und in Ihrem Code nachsehen, sehen wir Folgendes:
jQuery.each (("Unschärfe Fokus Fokus in Focusout Laden Größe ändern Scrollen Entladen Klicken DblKlicken Maus runter Maus runter Maus rüber Maus runter Maus runter Maus runter Ändern Auswählen Senden Tastendruck Tastendruck Fehler Kontextmenü"). split (""), f Funktion (i, Name) { // Ereignisbindung behandeln jQuery.fn [Name] = Funktion (Daten, fn) { if (fn == null) { fn = Daten; data = null; } Rückgabe arguments.length -> 0? this.on (name, null, data, fn): this.trigger (name); };
Von hier aus wollen wir nur sehen, dass die Methoden “verwischen, fokussieren, fokussieren, laden, skalieren, scrollen, entladen, klicken, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseeleave, ändern, auswählen, übermitteln, keydown, keypress, keyup, error und contextmenu “am ende enden alle in” this.on (name, null, data, fn) “.
bind (), live () und delegate ()
Früher wurde es auch gemacht:
(function () { $ ('button'). bind ('click', function () { // Code, der ausgeführt wird, wenn auf die Schaltfläche geklickt wird }); }) ();
Oder wenn wir wollten, dass das Ereignis auch nach dem Hinzufügen neuer “button” -Elemente zum Dokument funktioniert, haben wir die live () -Methode verwendet:
(function () { $ ('button'). live ('click', function () { // Code, der ausgeführt wird, wenn auf die Schaltfläche geklickt wird }); }) ();
Anschließend führte jQuery “delegate ()” ein, mit dem wir einem Kontext ein Ereignis zuweisen konnten. Befindet sich die Schaltfläche beispielsweise (oder wird sie später hinzugefügt) in einem div mit der Klasse “container”:
(function () { $ ('div.container'). delegate ('button', 'click', function () { // Code, der ausgeführt wird, wenn auf die Schaltfläche geklickt wird }); }) ();
Aber genau wie bei den vorherigen Methoden rufen beide Methoden, bind (), live () oder delegate (), lediglich die Methode on () auf.