Javascript addEventListener

Javascript addEventListener Warten auf ein Event

addEventListener ist eine zentrale Funktion, die Events und die dazugehörigen Aktionen registriert. addEventListener behandelt Events für window, document oder individuelle Elemente der Webseite.

removeEventListener löst den Event Handler wieder vom Ereignis.

18-12-15 SITEMAP

addEventListener registriert Events wie das Laden der Webseite, 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.

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

Mit addEventListener können theoretisch beliebig viele Events für ein Element angemeldet werden.

Event Listener des DOM
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) { 
    … 
}

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.

Die Funktion muss innerhalb einer Funktion aufgerufen werden, die von einem window.onload-Event Handler angestossen wurde, nachdem alle Elemente des Dokuments (das gesamte Markup, Style Sheets, Bilder und Plugins) geladen wurden.

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