JavaScript-Programmierung von Kopf bis Fuß

630 Anhang

addEventListener verwenden

6. Event-Handler mit addEventListener hinzufügen

In diesem Buch haben wir Objekteigenschaften verwendet, um Events bestimmte Handler zuzuweisen. Um

auf das load-Event zu reagieren, haben wir den Handler beispielsweise der Eigenschaft window.onload

zugewiesen. Den Klick auf einen Button haben wir über dessen onclick-Eigenschaft ge»handhabt«.

Diese Art der Zuweisung von Event-Handlern ist recht bequem. Manchmal wird aber eine allgemeinere

Art der Zuweisung gebraucht, beispielsweise wenn einem Eventtyp mehrere Handler zugewiesen werden

sollen. Das funktioniert mit Eigenschaften wie onload jedoch nicht. Stattdessen können Sie die Methode

addEventListener verwenden:

window.onload = function() {

var div = document.getElementById("clickme");

div.addEventListener("click", handleClick, false);

};

function handleClick(e) {

var target = e.target;;

alert("Sie haben " + target.id + " angeklickt");

target.removeEventListener("click", handleClick, false);

}

window.addEventListener("load", init, false);

function init() {

// Seite ist geladen

}

Wir rufen addEventListener am

window-Objekt auf, um einen

Handler für das load-Event zu

definieren.

Und wir übergeben drei

Argumente: den Namen

des Events (»load«)

als String …

… eine Referenz auf die Handler-

Funktion für das Event …

… und eine Markierung, die festlegt, ob

das Event per »bubbling« weitergereicht

werden soll (das erklären wir Ihnen gleich).

Dadurch wird die init-Funktion aufge-

rufen, wenn das load-Event auftritt.

Sie können window einen zweiten Event-Handler zuweisen, indem Sie addEventListener erneut aufrufen

und als zweites Argument eine andere Event-Handler-Funktion übergeben. Das ist praktisch, wenn Sie Ihren

Initialisierungscode in zwei separate Funktionen aufteilen möchten. Denken Sie beim Codedesign daran, dass die

Reihenfolge der Aufrufe nicht bekannt ist.

Das dritte Argument für addEventListener legt fest, ob das Event an Vorfahrenelemente weitergereicht wird

(die Experten nennen das »bubbling«). Beim load-Event ist das nicht so wichtig (weil sich das window-Objekt auf

der obersten Ebene des DOM-Baums befindet). Aber mal angenommen, Sie hätten ein <span>-Element, das in

einem <div>-Element verschachtelt ist, und das Event soll beim Anklicken von <span> beim umgebenden <div>

ankommen. Dann können Sie hierfür den Wert für das »bubbling« (das dritte Argument für addEventListener) auf

true anstelle von false setzen.

Es ist vollkommen in Ordnung, event-Eigenschaften wie onload und addEventListener gemeinsam zu benutzen.

Außerdem können Sie einen per addEventListener erstellten Event-Handler später mit removeEventListener

wieder entfernen, wie hier:

Hier verwenden wir die onload-Eigenschaft,

um eine Zuweisung auf den load-Event-

Handler des window-Objekts vorzunehmen.

Und hier benutzen wir addEventListener,

um dem click-Event des <div>-Elements

einen Event-Handler zuzuweisen.

Beim Anklicken des <div>-Elements

wird dessen Event-Handler per

removeEventListener entfernt.