Ereignisbehandlung mit jQuery

Das Veranstaltungen sind Situationen, die in unserem Dokument vorkommen HTML, können durch Situationen des Systems selbst oder durch Benutzeraktionen ausgelöst werden. In jedem Fall ist es möglich, wenn ein Ereignis eintritt, eine Nachbearbeitung mit jQuery, damit wir in unseren Programmen bessere Effekte erzielen können.
Dies ist von größter Bedeutung, da wir mit diesem Wissen und mit Hilfe des Frameworks unseren Webseiten und Anwendungen mehr Dynamik verleihen können.
Dies ist die erste Frage, die wir beantworten sollten, wenn wir mit Ereignissen in arbeiten jQuery, Wir hatten bereits gesagt, dass Ereignisse Aktionen oder Situationen sind, die vom System oder vom Benutzer ausgelöst werden, zum Beispiel wenn das Dokument fertig geladen ist, löst das System das Ereignis aus bereit oder bereit, wenn ein Benutzer auf ein Element klickt, wird ein gleichnamiges Ereignis ausgelöst.
Mit diesen kleinen Beispielen im Hinterkopf können wir dann die grundlegende Syntax sehen, um jede Art von Ereignis zu behandeln, nämlich die folgende:

$ (Selektor) .on ("EventName", Funktion () {….})

Denken wir daran oder klären Sie, dass der Selektor der Name ist, mit dem wir das Element in unserem Dokument suchen werden, dann mit Hilfe der Methode .an () Wir können ihm dann mitteilen, auf welches Ereignis es warten soll, und wenn es es erkennt, kann es eine anonyme Funktion in unserem Skriptabschnitt des ausführen HTML.
Etwas Interessantes, das wir hervorheben können, ist, dass wir a Handler für verschiedene EventsMit anderen Worten, wir können dieselbe Aktion für mehrere Situationen ausführen, wir müssen nur die verschiedenen Ereignisse auflisten, die abgehört werden müssen, die Syntax ist der soeben gesehenen sehr ähnlich.
$ (Selektor) .on ("Ereignisname1 Ereignisname2 Ereignisname3….", Funktion () {….})
Da wir das grundlegendste kennen, müssen wir auch anfangen, das zu wissen jQuery Es wird unser Leben als Entwickler immer einfacher machen, daher hat es einige Shortcuts zum Erstellen von Eventhandlern bereitgestellt, damit müssen wir nicht die vollständige Deklaration machen, wie wir im vorherigen Teil gesehen haben, sondern wenden diese Shortcuts direkt auf den Selektor an.
Sehen wir uns einige der interessantesten Verknüpfungen an, die von Entwicklern verwendet werden. Es ist zu beachten, dass dies nicht die vollständige Liste der verfügbaren ist. Um diese Liste zu erhalten, ist es besser, direkt zur offiziellen Dokumentation zu gehen, um jedoch einen kleinen Anfang zu machen Thema, diese sind mehr als genug.
bereit ()Wird ausgeführt, wenn alle Elemente des Dokuments SONNE Sie werden geladen, dh wenn die Site bereit ist, daher der Name. Es ist zu beachten, dass dies ein Systemereignis ist.
einreichen ()Es passiert, wenn wir a machen FormulareinreichungDas Interessante ist, dass das Formular, wenn es auftritt, nicht auf herkömmliche Weise gesendet wird, sondern darauf wartet, was dieses Ereignis mitteilt. Wir können es also als Zwischenpunkt für Feldvalidierungen verwenden, um ein Beispiel für seine Verwendung zu nennen.
klicken ()Es wird ausgeführt, wenn der Benutzer es tut klicken mit dem Mauszeiger über einem Element, kann es aus einem Eingabetyp-Feld stammen, um Elemente wie oder die Anker . Wie wir feststellen können, ist ein Ereignis, das vom Benutzer ausgelöst wird.
Unschärfe ()Es tritt auf, wenn das Element, auf dem wir uns gerade befinden, unscharf ist, zum Beispiel wir in ein Textfeld schreiben und zu einem nächsten Feld gehen, in diesem Fall hat das erste Feld den Fokus verloren und dieses Ereignis wird ausgeführt.
Fokus ()Im Gegensatz zum vorherigen Ereignis tritt dies nur dann auf, wenn wir uns auf ein Element konzentrieren.
schweben ()Dieses Ereignis tritt ein, wenn wir den Mauszeiger über ein Element des bewegen SONNE, kann normalerweise angewendet werden auf und Anker .
auswählen ()Tritt auf, wenn wir ein Element in einem Feld auswählen auswählenZum Beispiel haben wir eine Dropdown-Liste und wählen ein Element aus seinem Inhalt aus.
Veränderung ()Tritt auf, wenn sich der Wert oder Zustand eines Elements ändert, beispielsweise innerhalb eines Felds auswählen, wenn wir die dort angezeigte Option ändern.
Da wir ein wenig über die am häufigsten verwendeten Ereignisse wissen, werden wir ein kleines Dokument erstellen, das einige davon entweder in ihrer vollständigen Syntax oder mit Beispielen in die Praxis umsetzt, damit wir mit beiden Formen experimentieren können.
Im folgenden Code sehen wir, wie wir anfangs mit schreiben werden Konsole.log () wenn wir das dokument haben bereit (), dann wenden wir eine weitere Nachricht an, wenn wir mit der Maus über a fahren um zu bestätigen, wie es funktioniert schweben, endlich werden wir sehen, wie man es benutzt klicken () Ja Fokus () um andere Meldungen anzuzeigen. Schauen wir uns den Code an, der das oben beschriebene beschreibt:

 Ereignisbeispiel 1
Maus über diese Div !!

Schreiben Sie hier etwas:
Konzentriert euch auf mich:
$ (document) .ready (function () {console.log ("Das ready-Ereignis ist aufgetreten!");}); $ ("# Hover-Ereignis"). hover (function () {console.log ("Hover-Ereignis ist aufgetreten!");}); $ ("# Klickereignis"). click (function () {console.log ("wir haben ein Klickereignis ausgelöst .) VERGRÖSSERN
Dies geschieht, wenn wir möchten, dass ein Element verschiedene verknüpfte Ereignisse hat. Auf diese Weise können wir unseren Code besser organisieren und unserem Element mehrere Funktionen bereitstellen.
Es gibt zwei Möglichkeiten, die gleiche Aktion für mehrere Ereignisse auszuführen oder eine andere Aktion für jedes Ereignis auszuführen, wie wir möchten, müssen wir die vollständige Syntax verwenden, die erste, die wir bereits zu Beginn definiert haben.
Sehen wir uns an, wie Sie verschiedene Aktionen mit verschiedenen Ereignissen für dasselbe Element verknüpfen. Dazu müssen wir eine Basissyntax wie die folgende verwenden:

 $ (Selektor) .on ({EventName1: Funktion () {…}, EventName2: Funktion () {…}}); 

Wie wir sehen, vermeiden wir bei der Verwendung dieser Form der Syntax Folgendes:

 $ (Selektor) .ShortcutEvent1 (Funktion () {}); $ (Selektor) .ShortcutEvent2 (Funktion () {}); 

Was uns eine bessere Organisation ermöglicht, ist jedoch beides gültig und es liegt am Entwickler, dasjenige anzuwenden, das am besten zu ihm passt.
Da wir wissen, wie man mehrere Ereignisse mit einem Element verknüpft, werden wir es in die Praxis umsetzen, wir werden die Ereignisse auswählen klicken () Ja Fokus () In diesem Beispiel werden wir sie dann auf zwei Elemente anwenden, im ersten Element werden wir für jedes von ihnen dieselbe Antwort generieren und im zweiten wird jedes Ereignis seine eigene Antwort haben. Sehen wir uns den Code an, den wir ausführen müssen, um unser Ziel zu erreichen:

 Ereignisbeispiel 2
Gleiches Ergebnis mehrere Ereignisse:

Unterschiedliche Ergebnisse pro Veranstaltung:
$ ("# element1"). on ("click focus", function() {console.log ("wir zeigen dasselbe für 3 Ereignisse!");}); $ ("# element2"). on ({click: function () {console.log ("wir haben auf element2 geklickt");}, focus: function () {console.log ("wir haben uns auf element2 fokussiert");}}); 

Hier sehen wir, dass wir bei der zweiten Form unterschiedlicher Antworten für verschiedene Ereignisse vorsichtig sein müssen, da die Ereignisse nicht in Anführungszeichen stehen wie bei der ersten Form, auch dass wir sie in Klammern einschließen müssen {} alles in der Methode .an (), dies ist ein Fehler, der sehr häufig auftreten kann, sodass wir ihn mit dieser Vorsichtsmaßnahme vermeiden können. Sehen wir uns nun an, wie unser Beispiel aussieht, wenn wir es in unserem Browser ausführen:

VERGRÖSSERN
Wir notieren den Zähler mit a Nummer 2 Wenn die Ereignisse des ersten Elements auftreten, bedeutet dies, dass wir dieselbe Aktion zweimal wie geplant ausgeführt haben. Im zweiten Element stellen wir fest, dass wir die beiden bestimmten Aktionen in der Konsole ausgeben, obwohl wir auch sehen, dass sie in einer anderen Reihenfolge auftreten als die, in der wir sie platziert haben, weil das Ereignis von Fokus passiert vor dem klicken in der Ereignishierarchie, insbesondere wenn wir den Schlüssel verwenden TAB zwischen den Feldern zu bewegen.
Am Ende dieses Tutorials haben wir erfahren, wie wir in die Welt des Eventhandlings mit einsteigen können jQueryDies ist nur ein Mundöffner, aber mit diesen kleinen Funktionen können wir in unseren Anwendungen viele Dinge erreichen.

Hat Ihnen dieses Tutorial geholfen?
Wenn nicht

HILFE, DIESES TUTORIAL ZU VERBESSERN!
Glauben Sie, dass Sie dieses Tutorial korrigieren oder verbessern können? Sie können Ihre Edition mit den Änderungen senden, die Sie für sinnvoll erachten.
0 Benutzer haben dieses Tutorial bearbeitet. Bearbeiten Sie und werden Sie ein anerkannter Experte!
Bearbeiten Sie dieses Tutorial

ÄHNLICHE TUTORIALS

So ziehen und greifen Sie Bilder mit der JQuery-BenutzeroberflächeSo erstellen Sie ein Spinner- oder Ladesymbol mit JQueryJQuery-Plugins und -Bibliotheken für die WebentwicklungDynamisches Flexigrid-Grid mit JQuery und PHPJSON-Handling mit Node.jsEreignisbehandlung in Node.jsUmgang mit Puffern in Node.jsReguläre Ausdrücke mit Jquery
Keine Kommentare, seien Sie der Erste!
Warten Sie nicht länger und geben Sie Solvetic einHinterlassen Sie Ihre Kommentare und nutzen Sie das Benutzerkonto Machen Sie mit!

Benutzerkonto erstellenMelden Sie sich KOSTENLOS an, um Ihr Solvetic-Konto zu habenEinen Account registrieren
IdentifizierenHaben Sie bereits ein Konto? Hier anmeldenIdentifizieren Sie mich in meinem Konto




Information

 Veröffentlicht 12. Dezember 2014 14:44
 Aktualisiert 14.12.2014 05:44
 Besuche 3,7K
 NiveauFachmann


Neueste JavaScript-Tutorials

So aktualisieren Sie NPM mit PowerShell in Windows 10
So ziehen und greifen Sie Bilder mit der JQuery-Benutzeroberfläche
So erstellen Sie ein Spinner- oder Ladesymbol mit JQuery
Wie man eine Website in mehrere Sprachen übersetzen lässt

Sehen Sie mehr von JavaScript