JavaScript HTML-DOM-Ereignisse
HTML-DOM ermöglicht es JavaScript, auf HTML-Ereignisse zu reagieren.
Beispiele
Auf Ereignisse reagieren
Wir können JavaScript ausführen, wenn ein Ereignis eintritt, z. B. 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:
Beispiele für HTML-Ereignisse:
- Wenn der Benutzer mit der Maus klickt
- Wenn eine Webseite geladen wurde
- Wenn ein Bild geladen wurde
- Wenn die Maus über ein Element bewegt wird
- Wenn ein Eingabefeld geändert wird
- Wenn ein HTML-Formular übermittelt wird
- Wenn ein Benutzer einen Tastendruck auslöst
In diesem Beispiel ändert sich der Inhalt, wenn der Benutzer auf das <h1>-Element klickt:
Beispiele
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Klicken Sie auf den Text!</h1>
</body>
</html>
Selbst ausprobieren »
Dieses Beispiel ruft eine Funktion aus dem Ereignishandler auf:
Beispiele
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Klicken Sie auf den Text!</h1>
</body>
</html>
Selbst ausprobieren »
HTML-Ereignisattribute
Um Ereignisse HTML-Elementen zuzuweisen, können Sie Ereignisattribute verwenden.
Beispiele
Weisen Sie einem Button-Element ein onclick-Ereignis zu:
Selbst ausprobieren »
Im obigen Beispiel wird die Funktion namens displayDate ausgeführt, wenn auf die Schaltfläche geklickt wird.
Ereignisse mithilfe von HTML DOM zuweisen
Das HTML-DOM ermöglicht es Ihnen, HTML-Elementen mithilfe von JavaScript Ereignisse zuzuweisen:
Beispiele
Weisen Sie einem Button-Element ein onclick-Ereignis zu:
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
Selbst ausprobieren »
Im obigen Beispiel wird die Funktion namens displayDate dem HTML-Element mit id="myBtn" zugewiesen.
Die JavaScript-Funktion wird ausgeführt, wenn auf die Schaltfläche geklickt wird.
onload- und onunload-Ereignisse
Die Ereignisse onload und onunload werden ausgelöst, wenn der Benutzer die Seite betritt oder verlässt.
Das onload-Ereignis kann verwendet werden, um den Browsertyp und die Browserversion des Besuchers zu erkennen und basierend auf diesen Informationen die passende Version der Webseite zu laden.
Die Ereignisse onload und onunload können verwendet werden, um Cookies zu verwalten.
onchange-Ereignis
Das onchange-Ereignis wird häufig in Kombination mit der Validierung von Eingabefeldern verwendet.
Nachfolgend finden Sie ein Beispiel für die Verwendung von onchange. Wenn der Benutzer den Inhalt eines Eingabefelds ändert, wird die Funktion upperCase() aufgerufen.
onmouseover- und onmouseout-Ereignisse
Die Ereignisse onmouseover und onmouseout können verwendet werden, um Funktionen auszulösen, wenn die Maus des Benutzers über ein HTML-Element fährt oder es verlässt.
Beispiele
Ein einfaches onmouseover-onmouseout-Beispiel:
Selbst ausprobieren »
onmousedown-, onmouseup- und onclick-Ereignisse
onmousedown, onmouseup und onclick bilden alle Teile eines Mausklick-Ereignisses. Zuerst, wenn die Maustaste gedrückt wird, wird das onmousedown-Ereignis ausgelöst; wenn die Maustaste losgelassen wird, wird das onmouseup-Ereignis ausgelöst; schließlich, wenn der Mausklick abgeschlossen ist, wird das onclick-Ereignis ausgelöst.
Beispiele
Ein einfaches onmousedown-onmouseup-Beispiel:
Weitere Beispiele
onmousedown und onmouseup
Ersetzt ein Bild, wenn der Benutzer die Maustaste drückt.
onload
Zeige ein Eingabefeld an, wenn die Seite fertig geladen ist.
onfocus
Ändere die Hintergrundfarbe eines Eingabefelds, wenn es den Fokus erhält.
Maus-Ereignisse
Ändere die Farbe eines Elements, wenn der Zeiger darüber fährt; wenn der Zeiger den Text verlässt, ändere seine Farbe erneut.