Ereignisse in JavaScript | Mit Beispielen erklärt
Es ist bekannt, dass JavaScript einer Webseite die Möglichkeit gibt, „zu denken und zu handeln“, was aufgrund von Ereignissen möglich ist. Ereignisse wirken als Auslöser, die die Backend -Skripte dazu veranlassen, Aktionen auszuführen. Sie können leicht als als bezeichnet werden "Dinge" Dies geschieht auf einer Webseite, diese Ereignisse können alles sein: Laden einer Webseite, klicken Sie auf eine HTML -Schaltfläche oder schweben Sie die Maus über ein bestimmtes HTML -Element.
Es gibt Unstimmigkeiten von Ereignissen, die JavaScript auslösen können. Wir haben Ereignisse, um eine Funktion auf Mausklick oder bei Maus -Schwebungen auszulösen, aber wir werden die Arbeit mit Ereignissen und JavaScript behandeln.
Ein einfaches Beispiel für ein JavaScript -Ereignis, das bei einer Taste ausgeführt wird, wird unten angezeigt:
Event -Handler
Veranstaltungen werden von Event -Handlern verwaltet; HTML bietet die Möglichkeit, verschiedene Arten von Ereignishandlern zu seinen Elementen hinzuzufügen. Diese Event -Handler ermöglichen es dem Programmierer, Javascript -Code durch Ausführen einer Funktion auszuführen.
Es gibt 3 Arten von Event -Handlern:
- Dom-on-Event-Hörer
- Inline-Event-Hörer
- addEventListener () Methode
Der DOM On-Event-Hörer
Wir können Event -Hörer auf den DOM -Eigenschaften verwenden, z. B. das Auslösen eines Ereignisses beim vollständigen Laden der Webseite. Diese Ereignishörer können auch zu HTML -Elementen hinzugefügt werden, aber die Einschränkung ist ein Ereignishörer pro HTML -Element.
Zum Beispiel möchten wir den Benutzer auf das vollständige Laden der Webseite aufmerksam machen, indem wir dies tun, indem wir auf das Fensterobjekt des DOM zugreifen:
Nach dem Ausführen der HTML -Datei sehen Sie die folgende Ausgabe:
Wie Sie sehen können, benachrichtigt der Benutzer nach dem vollständig geladenen Webseite die Webseite, dass die Webseite geladen wurde.
Notiz: Das Fensterobjekt wird verwendet, um an globalen Ereignissen zu arbeiten.
Der Inline-Event-Hörer
Eine der trivialen Methoden bei der Arbeit mit HTML und JavaScript ist die Verwendung der Inline -Event -Hörer.
Zum Beispiel haben wir im obigen Beispiel eine hinzugefügt "Onclick ()" Ereignis im Tastenelement, wenn wir den Inline -Ereignis -Listener verwenden, setzen wir ihn gleich einer Funktion, die aufgerufen wird, wenn das Ereignis ausgelöst wird.
Wie du sehen kannst, btnclicked () ist die Funktion, die auf einer Schaltfläche klicken wird.
Wenn wir die Zeichenfolge in die Konsole "Sie haben die Taste gedrückt" drucken möchten, können wir das tun, indem wir das schreiben btnclicked () Funktion solcher Funktion:
Wenn Sie die HTML -Datei ausführen, erhalten Sie die folgende Ausgabe.
Verwenden Sie addEventListener ()
Der dritte Ereignishandler wird mit der Methode addEventListener () hinzugefügt. Dies ist die neue und am häufigsten verwendete Methode zur Bearbeitung von Ereignissen in JavaScript. Um dies zu zeigen, werden wir in HTML ein DIV erstellen, indem wir die folgenden Codezeilen verwenden:
AddEventListener () Beispiel
Um einen Event -Hörer dazu hinzuzufügen div Sie werden das folgende Skript -Snippet verwenden:
Wenn Sie sich das Skript -Snippet genau ansehen, werden Sie feststellen, dass wir 3 verschiedene Ereignishörer auf dieser DIV hinzufügen, eine, wenn der Cursor in die DIV eintritt, zweitens, wenn der Cursor die DIV verlässt, und zuletzt, wenn der Cursor auf die DIV klickt. Speichern Sie ihn nach dem Schreiben all dieser Code, laden Sie die Seite neu und Sie erhalten die folgende Ausgabe:
Wie Sie in der Konsole sehen können, arbeiten unsere Event -Handler und der JavaScript -Code wird ausgeführt.
Das ist es für Ereignisse in JavaScript
Abschluss
Ereignisse in JavaScript sind das Auftreten solcher Fälle, die das JavaScript dazu veranlassen. Das Ereignis in JavaScript wird verwendet, um der HTML -Webseite die Fähigkeit zur Denk- und Ausführung von Aktionen zu geben. Diese Ereignisse können alles sein, was ein Benutzer tut: Klicken auf eine Taste, Drücken einer bestimmten Taste oder eine bestimmte Mausbewegung. Es gibt auch einige globale Ereignisse, auf die mit dem Fensterobjekt wie dem Fenster zugegriffen werden kann.Belastung(). Wir haben verschiedene Arten von Event -Handlern zusammen mit ihren Beispielen erfahren.