HTML-Ereignisse sind „Dinge“, die mit HTML-Elementen passieren.
Wenn JavaScript in HTML-Seiten verwendet wird, kann JavaScript „reagieren“ diese Events.
Ein HTML-Ereignis kann etwas sein, was 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
Wenn Ereignisse eintreten, möchte man oft etwas unternehmen.
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 ein onclick-Attribut (mit Code) zu a hinzugefügt <button> Element:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
Im obigen Beispiel ändert der JavaScript-Code den Inhalt von das Element mit id="demo".
Im nächsten Beispiel ändert der Code den Inhalt von ein eigenes Element (mit this.innerHTML):
<button onclick="this.innerHTML = Date()">The time is?</button>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
JavaScript-Code ist oft mehrere Zeilen lang. Es kommt häufiger vor, dass Ereignisattribute Funktionen aufrufen:
<button onclick="displayDate()">The time is?</button>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Hier ist eine Liste einiger häufiger HTML-Ereignisse:
Ein HTML-Element wurde geändert
Der Benutzer klickt auf ein HTML-Element
Der Benutzer bewegt die Maus über ein HTML-Element
Der Benutzer bewegt die Maus von einem HTML-Element weg
Der Benutzer drückt eine Tastaturtaste
Der Browser hat das Laden der Seite abgeschlossen
Die Liste ist viel länger: W3Schools JavaScript Reference HTML DOM Events.
Event-Handler können verwendet werden, um Benutzereingaben und Benutzeraktionen zu verarbeiten und zu überprüfen. und Browseraktionen:
Dinge, die jedes Mal getan werden sollten, wenn eine Seite geladen wird
Dinge, die getan werden sollten, wenn die Seite geschlossen ist
Aktion, die ausgeführt werden soll, wenn ein Benutzer auf eine Schaltfläche klickt
Inhalte, die überprüft werden sollten, wenn ein Benutzer Daten eingibt
Und mehr ...
Um JavaScript mit Ereignissen arbeiten zu lassen, können viele verschiedene Methoden verwendet werden:
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 viel mehr über Ereignisse und Ereignishandler.