JavaScript/DOM/EventTarget/addEventListener

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode EventTarget.addEventListener() ermöglicht es mehrere Event-Handler zu einem Element hinzuzufügen.

  • DOM 2.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE 9
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Syntax target.addEventListener(type, listener[, useCapture]);

  • type: String mit dem Ereignistyp
  • listener: Handler-Funktion
  • useCapture: optionaler Boolean-Wert für die Event-Phase.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
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[Bearbeiten]

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:

Beispiel
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:

Beispiel
elem.addEventListener('change', getSelection, false);

function getSelection() {
    var value = this.options[this.selectedIndex].value;
    alert(value);
}

UseCapture / EventListenerOptions[Bearbeiten]

  • DOM 2.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE 9
  • Edge
  • Opera
  • Safari

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.
  • DOM 3.0
  • Chrome
  • Firefox

Details: caniuse.com

Eine Entwicklung von 2016 ist die Umwandlung von UseCapture zu einem Options-Parameter. An Stelle des boolean Wertes kann ein Objekt übergeben werden, 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:

Beispiel
var supportsCaptureOption = false;
document.createElement("div").addEventListener("test", function() {}, {
  get capture() {
    supportsCaptureOption = true;
    return false;
  }
});

Mehrere Eventhandler einfügen[Bearbeiten]

Einer der Vorteile dieser Methode gegenüber den klassischen Eventhandler-Attributen ist, dass Sie mehrere Event-Handler hinzufügen können.

Beispiel
button.onclick = LadeIrgendwas;
button.onclick = LadeNochwas;
Hier wird der erste Handler den zweiten überschrieben und deshalb nicht ausgeführt.
Beispiel
button.addEventListener ('click', LadeIrgendwas);
button.addEventListener ('click', LadeNochwas);
Beide Funktionen werden ausgeführt, sobald der Button geklickt wird.

attachEvent als Fallback für den IE8[Bearbeiten]

  • IE 6-86-8

Der Internet Explorer 6-8 hat eine eigene Methode attachEvent() um Eventhandler hinzuzufügen. Mit detachEvent() können diese wieder entfernt werden.

Hinweis

Auch wenn die Verbreitung des IE8 immer weiter zurückgeht und auf mobilen Seiten gar keine Rolle spielt, kann das Hinzufügen einer solchen Helferfunktion für ältere Browser nützlich sein.

integrierte Helferfunktion[Bearbeiten]

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]:


Beispiel ansehen …
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);
}


Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  1. molily: fortgeschrittenes Event-Handling (von Matthias Schäfer)