JavaScript/DOM/EventTarget/addEventListener
Die Methode addEventListener() ermöglicht es mehrere Event-Handler zu einem Element hinzuzufügen.
Details: caniuse.com
Inhaltsverzeichnis
Anwendungsbeispiel
var button = document.querySelector('button');
button.addEventListener('click', handlerForButton);
function handlerForButton ( ) {
var main = document.querySelector('main');
main.addEventListener('click', handlerForMain, true);
}
function handlerForMain ( ) {
var paragraph = document.getElementById('message');
paragraph.hidden = false;
}
In diesem Beispiel sind ursprünglich sowohl das Main-Element als auch der Button ohne Event-Handler.
Mit der Methode addEventListener wird nun zunächst für den Button und das Ereignis click ein Event-Handler registriert, indem der Methode bei ihrem Aufruf eine Referenz auf die Funktion mit dem Namen handlerForButton übergeben wird.
Wenn nun der Button geklickt wird, dann wird die Funktion handlerForButton ausgeführt, welche die Anweisung enthält, für das main-Element ebenfalls einen Event-Handler zu registrieren, wobei die Methode addEventListener mit einer Referenz auf die Funktion handlerForMain aufgerufen wird.
Wird nun irgendwo innerhalb von main geklickt, dann wird handlerForMain aufgerufen und ein Textabsatz eingeblendet, der zuvor durch das Setzen des Attributes hidden verborgen wurde.
Parameter übergeben
Der zweite Parameter enthält den Namen der aufzurufenden Funktion. Wenn Sie dieser Funktion bestimmte Argumente als Parameter übergeben wollen, kapseln Sie sie in eine anonyme Funktion:
elem.addEventListener('click', function() {
foo('bar');
}, true);
function foo(message) {
alert(message);
}
Innerhalb der aufgerufenen Funktion können Sie aber auch mit this auf Eigenschaften des aufrufenden Objekts zugreifen:
elem.addEventListener('change', getSelection, false);
function getSelection() {
var value = this.options[this.selectedIndex].value;
alert(value);
}
UseCapture
Details: caniuse.com
Mit dem dritten Parameter der addEventListener-Funktion bestimmen Sie, in welcher Phase der Ereignisbehandlung der Handler aufgerufen wird.
false: (Standardwert) der Aufruf findet in der Target- oder Bubbling-Phase statt. Vorsicht - manche Events haben gar keine (blur,focus) oder eine verkürzte Bubbling-Phase (z.B. gelangt 'load' nicht über das Dokument hinaus weiter zum Window).true: Der Aufruf findet in der Capturing-Phase statt.
Details: caniuse.com
Eine Entwicklung von 2016 ist die Umwandlung von UseCapture zu einem Options-Parameter. An Stelle des boolean Wertes wird ein Objekt erwartet, das mehrere Boolean-Parameter gruppiert. Wird einer dieser Parameter nicht angegeben, wird er als false angenommen.
-
capture: steuert, ob der EventHandler in der Capture- oder Target/Bubble-Phase gerufen wird (entspricht dem alten UseCapture-Parameter). -
passive: Der EventHandler ist passiv und kann das Ereignis nicht abbrechen (preventDefault wird ignoriert). Dies ermöglicht dem Browser gewisse Optimierungen für eine glattere GUI Darstellung -
once: Der EventHandler wird nach seinem ersten Aufruf automatisch wieder entfernt.
Problematisch daran ist, dass man nicht einfach { passive:true } an einem Browser übergeben kann, der das nicht unterstützt. Er würde es als true interpretieren und damit den Eventhandler in die Capturing-Phase verlegen. Ob ein Browser diese Erweiterung unterstützt, lässt sich durch eine etwas obskure Technik detektieren. Man nutzt dafür aus, dass sich Objekteigenschaften durch getter-Methoden realisieren lassen:
var supportsCaptureOption = false;
document.createElement("div").addEventListener("test", function() {}, {
get capture() {
supportsCaptureOption = true;
return false;
}
});
Mehrere Eventhandler einfügen
Einer der Vorteile dieser Methode gegenüber den klassischen Eventhandler-Attributen ist, dass Sie mehrere Event-Handler hinzufügen können.
button.onclick = LadeIrgendwas;
button.onclick = LadeNochwas;
button.addEventListener ('click', LadeIrgendwas);
button.addEventListener ('click', LadeNochwas);
attachEvent als Fallback für den IE8
Vorlage:Browsericonset Der Internet Explorer 6-8 hat eine eigene Methode attachEvent() um Eventhandler hinzuzufügen. Mit detachEvent() können diese wieder entfernt werden.
integrierte Helferfunktion
Mit dieser integrierten Helferfunktion können sie problemlos Event-Handler dynamisch einfügen und wieder entfernen. Im Script wird attachEvent() aufgerufen, wenn die Abfrage nach addEventListener false ergibt[1]:
function AddEvent(obj,type,fn) { // Helferfunktion für alle Browser
if (obj.addEventListener)
obj.addEventListener (type,fn,false);
else if (obj.attachEvent)
obj.attachEvent ('on'+type,fn);
}
function RemoveEvent(obj,type,fn) { // Helferfunktion für alle Browser
if (obj.removeEventListener)
obj.removeEventListener (type,fn,false);
else if (obj.detachEvent)
obj.detachEvent ('on'+type,fn);
}
Weblinks
- ↑ molily: fortgeschrittenes Event-Handling (von Matthias Schäfer)
- Peter Kropff: DOM-Scripting - Mehrere Event-Listener
- Peter Kropff: DOM-Scripting - Vor- und Nachteile