JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 399

Asynchron programmieren

Beim Aufruf des click-Handlers wird diesem ein Event-Objekt übergeben. Das

gilt übrigens für die meisten Events, die mit dem Document Object Model

(DOM) zu tun haben. Das Event-Objekt enthält allgemeine Informationen

über das Event, beispielsweise welches Element das Event ausgelöst hat und zu

welcher Zeit das passierte. Außerdem erhalten Sie für das Element spezifische

Informationen, wie etwa die Koordinaten des Klicks.

Gehen wir die Funktionsweise des Events noch einmal Schritt für Schritt durch:

Die Funktionsweise des Event-Objekts

function showAnswer(eventObj) {

...

}

Event

“

“

“

“

Sie klicken auf ein Bild …

… wodurch ein Event-Objekt

erzeugt wird …

Anhand des Event-Objekts erhalten Sie im Handler

Informationen über das Event, beispielsweise seinen Typ

und welches Element es ausgelöst hat usw..

Also, was enthält ein Event-Objekt? Es enthält allgemeine und für das

Event spezifische Informationen. Die spezifischen Dinge hängen vom Typ

des Events ab (wir kommen gleich dazu). Zu den allgemeinen Informati-

onen gehört die target-Eigenschaft. Sie enthält eine Referenz auf das

Objekt, das das Event ausgelöst hat. Wenn Sie auf ein Element in der Sei-

te klicken, z. B. ein Bild, ist dies das Ziel (target) des Events, und wir können

folgendermaßen darauf zugreifen:

function showAnswer(eventObj) {

var image = eventObj.target;

}

Die Eigenschaft

target sagt uns,

welches Element

das Event erzeugt

hat.

… das dann an den

Event-Handler

übergeben wird.

Es gibt noch andere Events

(neben den DOM-Events). Ein

paar Beispiele hierfür sehen wir

weiter unten in diesem Kapitel.

Nehmen Sie beispielsweise Ihr Spiel.

… was ein click-Event auslöst …

Wenn Sie mit IE8 oder

einer noch älteren

Version arbeiten,

werfen Sie bitte einen

Blick in den Anhang.

Für ältere Versionen von IE

funktioniert die Einrichtung des

Event-Objekts ein wenig anders.

400 Kapitel 9

Übung zum Event-Objekt

Ich enthalte das Objekt, an dem das Event

ausgelöst wurde. Ich kann verschiedene Objekte

enthalten. Meistens ist es aber ein Event-Objekt.

Wie Sie bereits wissen, besitzt das Event-Objekt (für DOM-Events) verschiedene Eigenschaften mit

Informationen zum aktuellen Event. Unten finden Sie weitere mögliche Eigenschaften des Event-

Objekts. Verbinden Sie die Eigenschaften mit der entsprechenden Aufgabe.

Ich bin ein String wie »click« oder »load«, der

Ihnen sagt, was gerade passiert ist.

Sie wollen wissen, wann Ihr Event stattgefunden

hat? Dann bin ich die richtige Eigenschaft.

Ich sage Ihnen, welche Taste der Benutzer gerade

gedrückt hat.

Sie wollen wissen, wie viele Pixel von der linken

Seite des Browserfensters entfernt der Benutzer

geklickt hat? Nehmen Sie mich.

Benutzen Sie mich, um zu ermitteln, wie viele Pixel

von der Oberkante des Browserfensters entfernt der

Benutzer geklickt hat.

Sie benutzen ein Gerät mit Touchscreen? Benutzen

Sie mich, um herauszufinden, wie viele Finger den

Bildschirm berühren.

target

type

timeStamp

keyCode

clientX

clientY

touches

wer macht was?

h

h

h

h