Javascript addEventListener

Asynchrone Ereignisse

addEventListener registriert Events wie »Laden der Webseite abgeschlossen«, den Klick auf ein Element, die Antwort auf einen XMLHttpRequest oder das Laden eines Videos und ruft eine Funktion (die auch als Event Handler bezeichnet wird) auf, sobald das Event feuert.

addEventListener ist asynchron: Wir rufen den Event Listener auf, bevor das Ereignis stattfindet, damit er Aktionen in Gang setzt, sobald das Ereignis erkannt wird. Bis es soweit ist, arbeitet der Browser die Seite ab und wartet nicht auf das Eintreten des Events. Das ist das Asynchrone an der Eventsteuerung: Während das Script auf das Laden Laden eines Bildes wartet, kann es weitere Anweisungen wie z.B. Berechnungen durchführen.

window.addEventListener ('load', myFunction, false);
const elem = document.getElementById('elem');
elem.addEventListener ('click', myFunction, false);
elem.addEventListener ('touch', myFunction, false);

addEventListener meldet theoretisch beliebig viele Events für ein Element an.

elem.addEventListener(eventType,   // EventType (z.B. click, touch 
                                       o. mouseover)
                      handler,     // aufzurufende Funktion
                      useCapture); // Phase der Aktivierung

Der dritte Parameter von addEventListener – useCapture – legt fest, in welcher Phase ein Event einen Event Listener aktiviert.

Der Handler ist im einfachsten Fall eine Javascript-Funktion, in der die Aktionen durchgeführt werden.

<div id="elem"> … </div>

let elem = document.getElementById('elem');
elem.addEventListener ('click', showElem, false);

function showElem() { … }

addEventListener mit Argumenten

Wenn addEventListener Argumente braucht, müssen die Anweisungen als anonyme Funktion in den Aufruf der Funktion addEventListener geschrieben werden.

elem.addEventListener ('click', 
   
    function() { //<-----anonyme Funktion
      showElem(param1, param2)
    }, 
      
    false);

function showElem(p1, p2) { 
    … 
}

Typische Argumente des Event Listeners sind z.B. das Element, auf dem ein Event ausgelöst wird. Wenn ein Klick-Event für drei verschiedene Buttons registriert werden kann, muss das Script u.U. erkennen, auf welchem Button das Event stattgefunden hat. Dafür bringen Events Informationen wie Event Target / Event Type (Ziel des Events und Art des Events) mit.

Mehr zu addEventListener mit Argumenten

removeEventListener

Der EventListener bleibt aktiv und horcht weiter auf das Eintreten des Event, auch wenn das Event ein erstes Mal eingetreten ist. Für einige Arten von Events ist das auch so erwünscht (z.B. bei click-Events), für andere Events hingegen kann dieses Verhalten zu Fehlern führen (z.B. bei einem mouseover).

Darum gibt es eine passende Methode removeEventListener, der das Event aus der Warteschlange der gemeldeten Events herausnimmt.

element.addEventListener("mouseover", function handler (event) {
  …
  event.currentTarget.removeEventListener(event.type, handler);
});

addEventListener once

In den immergrünen Browsern (alles außer IE11) hat addEventListener eine zusätzliche Option once, die den Event Listener automatisch entfernt, wenn das Event einmal eingetreten ist.

elem.addEventListener('click', function (event) {
   // nur einmal auszuführen
}, {once: true});

Das Aufräumen und Ausschalten der Event Handler, die nur einmal anspringen sollen, hält den Code übersichtlicher und die Speicherverwaltung effizienter, denn alle Variablen, die zum Callback gehören, können gelöscht werden (Garbage Collector).

Das onload-Problem

An einem generellen Problem ändert auch der eventListener des W3C nichts: addEventListener kann den Handler erst ausführen, wenn das Tag des Elements im Browser geladen wurde.

Wenn das Skript am Ende des Dokuments – vor dem schließenden body-Tag – geladen wird, ist sicher gestellt, dass die Elemente der Navigationsleiste geladen sind, dass der Browser das footer-Element kennt. Aber auch wenn der Browser das img-Tag bereits verarbeitet hat, ist das angesprochene Bild noch nicht geladen.

Wird ein Ereignis-Handler registriert, bevor der Browser das HTML-Element geladen hat, kommt es zu einem JavaScript-Fehler: Das Objekt ist unbekannt.

Das Warten auf das Laden des Dokuments (mit sämtlichen Bilder, Plugins ... ) führt zu einer Verzögerung bis zum Skript-Aufruf.

addEventListener mit callback

Z.B. ein zentrales registerKeyListener, die verschiedene Events auf unterschiedlichen Elementen registriert.

<input type="text" id="game" value="Gib mir ein Zeichen!">
<input type="text" id="anothergame" value="Holla">

function registerKeyListener(id, type, callback){
   document.getElementById(id).addEventListener(type, callback);
}

registerKeyListener("game", "keydown", tellMe);
registerKeyListener("anothergame", "blur", stopTalking);


function tellMe(){
   document.getElementById("gametext").innerHTML = "Schreib noch mehr";
}

function stopTalking(){
   document.getElementById("anothergametext").innerHTML = "Das reicht wirklich";
}

Mehr zu Javascript callback-Funktionen