JavaScript- HTML-DOM-Ereignisse
HTML DOM ermöglicht es JavaScript, auf HTML-Ereignisse zu reagieren:
Auf Ereignisse reagieren
Ein JavaScript kann ausgeführt werden, wenn ein Ereignis eintritt, beispielsweise wenn ein Benutzer auf ein HTML-Element klickt.
Um Code auszuführen, wenn ein Benutzer auf ein Element klickt, fügen Sie JavaScript-Code zu einem HTML-Ereignisattribut hinzu:
onclick=JavaScript
Beispiele für HTML-Ereignisse:
- Wenn ein Benutzer mit der Maus klickt
- Wenn eine Webseite geladen wurde
- Wenn ein Bild geladen wurde
- Wenn die Maus über ein Element fährt
- Wenn ein Eingabefeld geändert wird
- Wenn ein HTML-Formular gesendet wird
- Wenn ein Benutzer eine Taste drückt
In diesem Beispiel wird der Inhalt des <h1>Elements geändert, wenn ein Benutzer darauf klickt:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
In diesem Beispiel wird eine Funktion vom Ereignishandler aufgerufen:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
HTML-Ereignisattribute
Um HTML-Elementen Ereignisse zuzuweisen, können Sie Ereignisattribute verwenden.
Beispiel
Weisen Sie einem Schaltflächenelement ein Onclick-Ereignis zu:
<button onclick="displayDate()">Try it</button>
Im obigen Beispiel wird eine Funktion mit dem Namen displayDateausgeführt, wenn auf die Schaltfläche geklickt wird.
Weisen Sie Ereignisse mithilfe des HTML-DOM zu
Mit dem HTML-DOM können Sie HTML-Elementen mithilfe von JavaScript Ereignisse zuweisen:
Beispiel
Weisen Sie einem Schaltflächenelement ein Onclick-Ereignis zu:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Im obigen Beispiel wird eine Funktion mit displayDatedem Namen einem HTML-Element mit dem Zusatz id="myBtn".
Die Funktion wird ausgeführt, wenn auf die Schaltfläche geklickt wird.
Die onload- und onunload-Ereignisse
Die Ereignisse onloadund onunloadwerden ausgelöst, wenn der Benutzer die Seite betritt oder verlässt.
Das onloadEreignis kann verwendet werden, um den Browsertyp und die Browserversion des Besuchers zu überprüfen und basierend auf den Informationen die richtige Version der Webseite zu laden.
Die Ereignisse onloadund onunloadkönnen verwendet werden, um mit Cookies umzugehen.
Beispiel
<body onload="checkCookies()">
Das onchange-Ereignis
Das onchangeEreignis wird häufig in Kombination mit der Validierung von Eingabefeldern verwendet.
Nachfolgend finden Sie ein Beispiel für die Verwendung von onchange. Die upperCase()
Funktion wird aufgerufen, wenn ein Benutzer den Inhalt eines Eingabefelds ändert.
Beispiel
<input type="text" id="fname"
onchange="upperCase()">
Die onmouseover- und onmouseout-Ereignisse
Die Ereignisse onmouseoverund onmouseoutkönnen verwendet werden, um eine Funktion auszulösen, wenn der Benutzer die Maus über oder aus einem HTML-Element bewegt:
Die onmousedown-, onmouseup- und onclick-Ereignisse
Die Ereignisse onmousedown, onmouseup, und onclicksind alle Teile eines Mausklicks. Erst wenn eine Maustaste geklickt wird, wird das Ereignis onmousedown ausgelöst, dann wird beim Loslassen der Maustaste das Ereignis onmouseup ausgelöst, und schließlich, wenn der Mausklick abgeschlossen ist, wird das Ereignis onclick ausgelöst.
Mehr Beispiele
Ändert ein Bild, wenn ein Benutzer die Maustaste gedrückt hält.
ein Warnfeld an, wenn die Seite fertig geladen ist.
Ändert die Hintergrundfarbe eines Eingabefeldes, wenn es den Fokus erhält.
Ändert die Farbe eines Elements, wenn der Mauszeiger darüber bewegt wird.
HTML-DOM-Ereignisobjektreferenz
Eine Liste aller HTML-DOM-Ereignisse finden Sie in unserer vollständigen HTML-DOM-Ereignisobjektreferenz .