Eventlistener installieren
Mit Eventlistener wird, wie der Name schon sagt, auf ein Event reagiert. Eventlistener kann man auf viele Tag setzen. Siehe Artikel unten.
Aber auch bei einem AJAX-Request oder bei der Drag and Drop API sind Eventlistener wichtig.
Ein Eventlistener für click auf das Elemnt mit der id send der die Funktion speichern aufruft, wird wie folgt gesetzt:
document.getElementById("send").addEventListener("click", speichern, false);
Ich setze die Eventlistener in einer Funktion initiate.
Die Funktion rufe ich als letzte Zeile meiner JavaScript-Datei mit einem Eventlistener auf.
window.addEventListener("DOMContentLoaded", initiate, false);
Beim Event DOMContentLoaded, also wenn der komplette DOM-Baum geladen ist,
wird die Funktion initiate aufgerufen.
Der Funktion, die beim addEventListener angegeben wird, wird automatisch das Objekt übergeben.
Dies muss in eine Variable übernommen werden (z.B. e_eventObject).
Mit e_eventObject.type kann auf das Ereignis zugegriffen werden e_eventObject.target.name oder e_eventObject.target.id liefern die entsprechend beim Objekt in HTML definierten Werte.
Liste aller Events: Eventliste
Auf den Button Test Eventlistener ist folgender Event definiert:
document.getElementById("btnEventListener").addEventListener("click", requestEvent, false);
Bei jedem Event wird die Funktion requestEvent aufgerufen. Diese Funktion gibt den Event, die ID und den Namen aus.