JavaScript HTML DOM Ereignisse

HTML DOM ermöglicht es JavaScript, auf HTML-Ereignisse zu reagieren:

Die Maus kommt herein!
Klicken Sie hier

Auf Ereignisse reagieren

JavaScript kann ausgeführt werden, wenn ein Ereignis stattfindet, zum Beispiel wenn der Benutzer auf ein HTML-Element klickt.

Um Code auszuführen, wenn der Benutzer auf ein Element klickt, fügen Sie JavaScript-Code zur HTML-Ereignisattribut hinzu:

onclick=JavaScript

Beispiel für HTML-Ereignisse:

  • Wenn der Benutzer auf die Maus klickt
  • wenn die Webseite geladen wird
  • wenn das Bild geladen wird
  • wenn der Mauszeiger auf das Element gelegt wird
  • wenn das Eingabefeld geändert wird
  • wenn das HTML-Formular gesendet wird
  • wenn der Benutzer eine Taste drückt

In diesem Beispiel wird, wenn der Benutzer <h1> geändert, wenn

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Klicken Sie auf diesen Text!</h1>
</body>
</html>

Probieren Sie es selbst aus

In diesem Beispiel wird die Funktion aufgerufen, von dem Ereignisverarbeiter:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Klicken Sie auf diesen Text!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Probieren Sie es selbst aus

HTML Ereignisattribute

Um Ereignisse an HTML-Elemente zu zuweisen, können Sie die Ereignisattribute verwenden.

Beispiel

an das Schaltflächelement zuweisen onclick Ereignis:

<button onclick="displayDate()">Versuchen Sie es aus!</button>

Probieren Sie es selbst aus

Im obigen Beispiel wird die Funktion displayDate ausgeführt, wenn auf die Schaltfläche geklickt wird.

Ereignisse mit HTML DOM zuweisen

HTML DOM ermöglicht es Ihnen, mit JavaScript Ereignisse an HTML-Elemente zu zuweisen:

Beispiel

Schaltflächelemente zuweisen onclick Ereignis:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Probieren Sie es selbst aus

Im obigen Beispiel wird die Funktion displayDate, die dem HTML-Element mit id="myBtn" zugewiesen ist, aufgerufen.

ausgeführt, wenn auf die Schaltfläche geklickt wird.

onload und onunload Ereignisse

Wenn der Benutzer in die Seite eintritt und sie verlässt, wird onload und onunload Ereignis.

onload Ereignisse können verwendet werden, um den Browser-Typ und die Browser-Version des Besuchers zu erkennen und basierend auf dieser Information die passende Version der Webseite zu laden.

onload und onunload Ereignisse können verwendet werden, um Cookies zu verarbeiten.

Beispiel

<body onload="checkCookies()">

Probieren Sie es selbst aus

onchange Ereignis

onchange Ereignisse oft mit der Validierung von Eingabefeldern kombiniert werden.

Nachfolgend ein Beispiel dafür, wie onchange Beispiel. Wenn der Benutzer den Inhalt des Eingabefelds ändert, wird die Funktion upperCase() aufgerufen.

Beispiel

<input type="text" id="fname" onchange="upperCase()">

Probieren Sie es selbst aus

onmouseover und onmouseout Ereignisse

onmouseover und onmouseout Das Ereignis kann verwendet werden, um eine Funktion auszulösen, wenn der Benutzer die Maus auf das HTML-Element bewegt oder davon wegzieht:

Die Maus kommt herein!

Probieren Sie es selbst aus

onmousedown, onmouseup und onclick-Ereignisse

onmousedown, onmouseup und onclick Die Ereignisse bilden das vollständige Mausklick-Ereignis.

Zuerst, wenn die Maustaste geklickt wirdonmousedown Das Ereignis wurde ausgelöst; dann, wenn die Maustaste gelöst wirdonmouseup Das Ereignis wurde ausgelöst; schließlich, wenn der Mausklick abgeschlossen istonclick Das Ereignis wurde ausgelöst.

Klicken Sie hier

Probieren Sie es selbst aus

Mehr Beispiele

onmousedown und onmouseup
Ändern Sie das Bild, wenn der Benutzer die Maustaste drückt.
onload
Zeigen Sie eine Warnbox an, wenn die Seite vollständig geladen ist.
onfocus
Ändern Sie die Hintergrundfarbe des Eingabefelds, wenn es den Fokus erhält.
Mausereignisse
Ändern Sie die Farbe des Elements, wenn der Zeiger darauf bewegt wird.

HTML-DOM-Ereignis-Objekt-Referenzhandbuch

Für eine Liste aller HTML-DOM-Ereignisse besuchen Sie bitte unser vollständiges HTML-DOM-Ereignis-Objekt-Referenzhandbuch.