JavaScript -Ereignisse
HTML-Ereignisse sind "Dinge" , die mit HTML-Elementen passieren.
Wenn JavaScript in HTML-Seiten verwendet wird, kann JavaScript auf diese Ereignisse „reagieren“ .
HTML-Ereignisse
Ein HTML-Ereignis kann etwas sein, das der Browser oder ein Benutzer tut.
Hier sind einige Beispiele für HTML-Ereignisse:
- Eine HTML-Webseite wurde vollständig geladen
- Ein HTML-Eingabefeld wurde geändert
- Es wurde auf eine HTML-Schaltfläche geklickt
Oft möchten Sie etwas tun, wenn Ereignisse eintreten.
Mit JavaScript können Sie Code ausführen, wenn Ereignisse erkannt werden.
HTML ermöglicht das Hinzufügen von Event-Handler-Attributen mit JavaScript-Code zu HTML-Elementen.
Mit einfachen Anführungszeichen:
<element
event='some JavaScript'>
Mit doppelten Anführungszeichen:
<element
event="some JavaScript">
Im folgenden Beispiel wird einem Element ein onclickAttribut (mit Code) hinzugefügt
:<button>
Beispiel
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
Im obigen Beispiel ändert der JavaScript-Code den Inhalt des Elements mit id="demo".
Im nächsten Beispiel ändert der Code den Inhalt seines eigenen Elements (mithilfe von this.innerHTML):
Beispiel
<button onclick="this.innerHTML = Date()">The time is?</button>
JavaScript-Code ist oft mehrere Zeilen lang. Es kommt häufiger vor, dass Ereignisattribute Funktionen aufrufen:
Beispiel
<button onclick="displayDate()">The time is?</button>
Allgemeine HTML-Ereignisse
Hier ist eine Liste einiger häufiger HTML-Ereignisse:
| Fall | Beschreibung |
|---|---|
| bei Änderung | Ein HTML-Element wurde geändert |
| anklicken | Der Benutzer klickt auf ein HTML-Element |
| onmouseover | Der Benutzer bewegt die Maus über ein HTML-Element |
| onmouseout | Der Benutzer bewegt die Maus von einem HTML-Element weg |
| onkeydown | Der Benutzer drückt eine Tastaturtaste |
| laden | Der Browser hat das Laden der Seite abgeschlossen |
Die Liste ist viel länger: W3Schools JavaScript Reference HTML DOM Events .
JavaScript-Event-Handler
Ereignishandler können verwendet werden, um Benutzereingaben, Benutzeraktionen und Browseraktionen zu verarbeiten und zu überprüfen:
- Dinge, die jedes Mal ausgeführt werden sollten, wenn eine Seite geladen wird
- Dinge, die getan werden sollten, wenn die Seite geschlossen wird
- Aktion, die ausgeführt werden soll, wenn ein Benutzer auf eine Schaltfläche klickt
- Inhalt, der überprüft werden sollte, wenn ein Benutzer Daten eingibt
- Und mehr ...
Viele verschiedene Methoden können verwendet werden, um JavaScript mit Ereignissen arbeiten zu lassen:
- HTML-Ereignisattribute können JavaScript-Code direkt ausführen
- HTML-Ereignisattribute können JavaScript-Funktionen aufrufen
- Sie können HTML-Elementen eigene Event-Handler-Funktionen zuweisen
- Sie können verhindern, dass Ereignisse gesendet oder verarbeitet werden
- Und mehr ...
In den HTML-DOM-Kapiteln erfahren Sie noch viel mehr über Events und Event-Handler.