Was sind JavaScript -Ereignisse?
Sie fahren in einem Auto und ein Signal kommt, es ist rot, Sie halten an. Wenn das Signal grün wird, fangen Sie wieder mit dem Fahren an. Ihre Aktionen basierten auf einem Signal, das Ihnen zur Verfügung gestellt wurde. Gleiches gilt für Ereignisse. Wenn Sie programmieren, möchten Sie, dass einige Aktionen durchgeführt werden, indem Sie auf eine Taste klicken oder eine Taste drücken. Das Klicken der Taste oder das Drücken einer Taste erzeugt ein Ereignis. Basierend auf dieser Veranstaltung wird einige Aktionen durchgeführt. Zum Beispiel gibt es einen Artikel und eine Schaltfläche, die liest “Zeig mehr”. Wenn Sie auf diese Schaltfläche klicken, wird der gesamte Artikel sichtbar
In diesem Beitrag werden wir alles über Ereignisse mit Beispielen besprechen.
Was ist eine Veranstaltung
Einfach ausgedrückt ist ein Ereignis eine Aktion, die von einem Benutzer ausgeführt oder vom Browser initiiert wird. JavaScript reagiert/reagiert auf diese Aktion; Dies reagiert/reagiert auf das Ereignis, heißt Event -Handling. Die Event -Handhabung ist nur ein vom Entwickler geschriebener Code. Dieser Code wird ausgeführt, wenn das Ereignis ausgelöst wird. Event -Handler heißen auch Event -Hörer. Die Ereignisse werden im Browserfenster abgefeuert und sind verwandt oder an einen einzelnen oder einen Satz von Elementen verbunden. Ereignisse sind von vielen verschiedenen Typen. Einige von ihnen sind:
- Der Benutzer drückt eine Taste auf der Tastatur
- Der Benutzer schwebt über ein Element
- Der Benutzer klickt auf ein Element über die Maus
- Der Benutzer schließt den Browser
- Der Benutzer ändert sich den Browser
- Die Webseite lädt oder lädt fertig
- Wenn ein Fehler auftritt
- Der Benutzer reicht ein Formular ein
JavaScript -Ereignisse
JavaScript bietet uns ein paar Ereignisse. Es ist unmöglich, alle aufzulisten und alle unter einem Artikel zu erklären. Hier werde ich nur die häufigsten auflisten:
Eingabeereignisse
- Blau
- ändern
- Fokus
- KeyUp/Keydown
- Tastendruck
Mausereignisse
- Mausover
- Mausout
- Mousedown/MouseUp
Klicken Sie auf Ereignisse
- klicken
- DBLCLICK
Ereignisse laden
- Belastung
- entladen
- Fehler
- Größenänderung
Nachdem wir die Theorie diskutiert haben, gehen wir in die Praktikabilität und diskutieren einige Beispiele für JavaScript -Ereignisse im wirklichen Leben. Angenommen, ich habe eine Schaltfläche und wenn ich auf diese Schaltfläche klicke, möchte ich, dass der Benutzer eine Warnung angezeigt wird. Das Klicken der Schaltfläche löst das Ereignis aus, und dann wird ein Codeblock das Ereignis behandelt und reagiert, indem eine Warnung angezeigt wird.
Dies ist eine einfache Schaltfläche in einer HTML -Datei. Jetzt erhalten wir die Schaltfläche über den Klassennamen und behandeln dann das Ereignis, das ich klicke.
const btn = dokument.QuerySelector (".Klick mich");Btn.AddEventListener ('Click', function ()
alarm ("Sie haben auf die Schaltfläche geklickt");
);
Legen Sie diesen Code in ein Skript -Tag oder erstellen Sie eine andere Datei mit JS -Erweiterung und setzen Sie ihn dort ein.
Wenn wir nun auf die Schaltfläche klicken, wird eine Warnung angezeigt:
Es gibt auch andere Möglichkeiten, wie wir dies implementieren können, zum Beispiel:
const btn = dokument.QuerySelector (".Klick mich");Btn.onclick = function ()
alarm ("Sie haben auf die Schaltfläche geklickt");
;
Oder:
const btn = dokument.QuerySelector (".Klick mich");Funktion klickedme ()
alarm ("Sie haben auf die Schaltfläche geklickt");
;
Btn.Onclick = ClickedMe;
Die HTML-Datei i-e Die Schaltfläche bleibt gleich.
Notiz: Sie können Ihren JavaScript -Code in ein Skript -Tag einfügen und dann Ihre HTML -Datei mithilfe von Live -Server im Browser ausführen oder eine andere Datei mit JS -Erweiterung erstellen und sie im Header der HTML -Datei verweisen.
Schauen wir uns nun ein anderes Beispiel an: Angenommen, wir haben ein Registrierungsformular. In der Form haben wir zwei Eingabefelder und wir möchten die Validierung einsetzen. Wenn der Benutzer das Formular einreicht, möchten wir überprüfen, ob der Benutzer beide Eingaben gefüllt oder leer gelassen hat. Wenn beide oder einer von ihnen leer sind, zeigen wir einen Alarm, dass das Feld leer ist. Andernfalls zeigen wir eine Warnung, die besagt, dass sich der Benutzer registriert hat:
Als wir das Kennwortfeld leer ließen und auf das Register klickten, löste ein Ereignis I-E Subjekt aus. Aber basierend auf unserem Handler das Eingabefeld “Passwort"War leer, daher eine Nachricht"Bitte füllen Sie die erforderlichen Felder aus" wird gezeigt.
Als wir beide Felder füllten und auf die Schaltfläche Register geklickt haben, “klickten wir“Eingetragen" wurde gezeigt.
Abschluss
Ereignisse und Ereignisbehandlungen sind wirklich wichtige Konzepte von JavaScript. Wenn ein Benutzer mit einer Webseite interagiert, wird ein Ereignis ausgelöst. JavaScript bietet Event -Handler, um auf diese Ereignisse zu reagieren und Webseiten interaktiver zu gestalten und gleichzeitig eindringliche Benutzererfahrung bereitzustellen. Bei diesen Veranstaltungshandlern können wir unseren eigenen Code und unsere eigene Logik einstellen und etwas Schönes machen.
In diesem Beitrag haben wir kurz die JavaScript -Ereignisse besprochen und wie wir mit ihnen umgehen können. Dann wechselten wir zu den Arten von Ereignissen und Event -Handlern und ihren wirklichen Anwendungen.