Ereignisse treten ein, wenn Besucher auf Webseiten bestimmte Aktionen ausführen, wie z. B. das Anklicken eines Button. Mit Hilfe von Ereignissen können Webseiten interaktiv gemacht werden, d. h. dazu befähigt werden, auf Benutzeraktionen zu reagieren. Dazu wird beim gewünschten HTML-Element das entsprechende Ereignis-Attribut definiert, das auf den auszuführenden JavaScript-Code bzw. auf die auszuführende JavaScript-Funktion verweist. Tritt das Ereignis ein, wird der entsprechende Code ausgeführt.

Häufig auf Webseiten verwendete Ereignisse sind u. a.:

• onClick: Klick auf ein HTML-Element
• onChange: Ändern eines HTML-Elements
• onMouseOver: Mausezeiger wird über ein HTML-Element bewegt
• onMouseOut: Mauszeiger verlässt ein HTML-Element
• onKeyDown: Eine Taste wird gedrückt
• onKeyUp: Eine Taste wird wieder losgelassen

Hinweis: Eine vollständige Liste der Ereignisse gibt es auf der Seite „HTML DOM Events“ bei „w3schools.com“!

Über das DOM ist es möglich, mit Hilfe von JavaScript, Ereignis-Attribute für HTML-Elemente zur Laufzeit zu definieren. Dazu gibt es folgende Möglichkeiten:

1. Direkte Verwendung der Ereignis-Attribute:
   element.ereignis = funktion;
2. Verwendung der Methode „addEventListener()“:
   element.addEventListener(ereignis, funktion, option);

Über das DOM können, mit Hilfe von JavaScript, für HTML-Elemente Ereignis-Attribute zur Laufzeit definiert werden. Dazu können die Ereignis-Attribute direkt über die korrespondierenden DOM-Objekte gesetzt werden:

HTML-Datei:

Ergebnis:

Mit der Methode „addEventListener()“ können zur Laufzeit für HTML-Elemente und DOM-Objekte (wie z. B. dem „window“-Objekt) Ereignis-Attribute definiert werden. Die Syntax ist dabei wie folgt:

element.addEventListener(ereignis, funktion, option)

HTML-Datei:

Ergebnis:

Dabei können mit der Methode „addEventListener()“ auch für ein Element bzw. Objekt mehrere unterschiedliche Ereignis-Attribute und mehrere Funktionen für das selbe Ereignis-Atrribut definiert werden:

HTML-Datei:

Ergebnis:

Mit der Option der Methode „addEventListener()“ kann bei verschachtelten HTML-Elementen festgelegt werden, in welcher Reihenfolge die Ereignisse abgearbeitet werden. Mit der Option „bubbling“ wird zuerst das Ereignis des inneren Elements ausgeführt und mit der Option „capturing“ zuerst das Ereignis des äußeren Elements:

HTML-Datei:

Ergebnis:

Mit der Methode „removeEventListener()“ können Funktionen von Ereignis-Attributen wieder entfernt werden:

HTML-Datei:

Ergebnis:

Als Abschlussübung kannst du folgendes Beispiel erstellen, bei dem mit jedem Klick, das „click“-Ereignis neu definiert wird:

Gehe dabei wie folgt vor:

• Erstelle ein „div“-Element ohne ein „onclick“-Attribut
• Definiere für das „div“-Element per JavaScript-Code und der Methode „addEventListener()“ das „onclick“-Ereignis und weise diesem eine Funktion zu
• In der ersten Funktion wird vom „onclick“-Ereignis die erste Funktion entfernt und eine zweite Funktion zugewiesen
• Außerdem wird in der ersten Funktion der Inhalt des „div“-Elements entsprechend angepasst
• In der zweiten Funktion wird erneut dem „onclick“-Ereignis eine neue Funktion zugewiesen und der Inhalt angepasst
• In der dritten Funktion wird vom „onclick“-Ereignis die zuletzt zugewiesene Funktion entfernt und das „div“-Element mit „.style.display = ‚none‘“ ausgeblendet
• Wird der Button „Zurücksetzen“ angeklickt wird das „div“-Element mit „.style.display = ‚block‘“ wieder eingeblendet und dem „onclick“-Ereignis wieder die ersten Funktion zugewiesen

Die Lösung kannst du dir hier herunterladen:

https://www.w3schools.com/js/js_htmldom_events.asp

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://www.w3schools.com/jsref/dom_obj_event.asp