CSS, HTML und Javascript mit {stil}

Event Target, Event Type und Timestamp

Welches Element hat das Event ausgelöst?

Jedes Javascript-Event bringt Informationen mit, die das Ereignis und seinen aktuellen Zustand beschreiben – z.B.

  • event target – das auslösende HTML-Element
  • event type – die Art des Events
  • timestamp – Zeitpunkt des Events.

Das Event wird automatisch an die aufgerufende Funktion weitergegeben, aber das Script muss das Event der Funktion dennoch ausdrücklich übergeben.

event als Parameter des Event Handlers
var theTarget = document.querySelector ('.me-info-back a');
theTarget.addEventListener ('click', tellMe );
theTarget.addEventListener ('touch', tellMe );
theTarget.addEventListener ('mouseover', tellMe );

function tellMe (evt) {
    evt.preventDefault();
            …
}

Das Argument evt im Funktionsaufruf function tellMe (evt) ist die einzige Verbindung zum event-Objekt. Wenn wir das Ereignis später in einer anderen Funktion brauchen, muss die Funktion als Relay dienen und das Ereignis oder die Werte seiner Eigenschaften weitergeben.

Um Konflikte mit dem window.event von IE8 und davor zu vermeiden, sollte man als Namen für den Parameter nicht "event" wählen.

Javascript

Events

Am Rande: Der einfachste Weg zu den Informationen zum Event führt über die Konsole: console.log(evt) liefert alle Informationen über das Event-Objekt in die Konsole des Browsers.

Anpassung der Referenzen auf das Event-Objekt

Um den unterschiedlichen Umgang mit dem Event-Objekt zwischen den Browsern anzupassen, benutzen wir eine Objekt-Erkennung (Object Detection):

function myFunc(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    // Verarbeitung des Ereignisses
}

Bei diesem Aufbau des Event-Handlers spielt es keine Rolle, ob der Event Handler explizit durch ein HTML-Attribut oder implizit durch eine Eigenschaft des Elements eingebunden wurde. Die Funktion muss auch nicht geändert werden, wenn sich die Methode des Einbindens ändert.

In Feld klicken oder Feld mit der Tabulator-Taste ansteuern:

Die Referenz auf das HTML-Element, auf dem sich Event abgespielt hat, gehört zu den wichtigsten Informationen. W3C-kompatible Browser sprechen das HTML-Element mit target an, während IE6 / IE7 und IE8 srcElement benutzen. Der Unterschied lässt sich durch eine Objekt-Erkennung eliminieren:

var elem = (evt.target) ? evt.target : evt.srcElement;

Informationen zu Maus- / Tastatur-Events

altKey (boolean)
Gibt an, ob die Alt-Taste beim Feuern des Ereignisses gedrückt war.
button
Syntax: event.button
Maustaste: Eine Zahl für die gedrückte Maustaste
W3C linke Maustaste = 1, mittlere Maustaste = 2, rechte Maustaste = 3
MSIE: keine Maustaste = 0, linke Maustaste = 1, rechte Maustaste = 2, rechte und linke Maustaste = 3, mittlere Maustaste = 4, linke und mittlere Maustaste = 5, mittlere und rechte Maustaste = 6, linke, mittlere und rechte Maustaste = 7
Eine Maus mit nur einer Taste wird immer nur 1 zurückgeben, eine Maus mit zwei Tasten kann 1 oder 3 zurückgeben.
buttons
Bitmaske mit der Kombination der Maustasten
clientX/clientY
IE offsetX / offsetY
Mauskoordinaten relativ zum Fenster
ctrlKey (boolean)
Gibt an, ob die Ctrl-Taste beim feuern des Ereignisses gedrückt war.
keyCode
Letzte gedrückte Taste. Das Zeichen mit String.fromCharCode(keyCode) lesen / IE-Event, tuts aber gut.
keyIdentifier
Identifiziert die gedrückte Taste
keyLocation
Ort der Taste auf der Tastatur
metaKey
Ob die Metataste beim Auslösen des Events gedrückt war
relatedTarget
Gibt bei einem mouseover-Ereignis an, welches Element verlassen wurde. Bei einem mouseout gibt die Eigenschaft an, auf welchen Knoten die Maus bewegt wurde.
Alte Versionen von IE: fromElement, toElement
screenX / screenY
Syntax: event.screenX / event.screenY
x-/y-Koordinate des Mauszeigers beim Eintreten des Ereignisses relativ zum Koordinatensystem des Fensters.
shiftKey
Ob die Shifttaste beim Feuern des Events gedrückt war

Informationen zu Touch-Events

changedTouches
Liste aller Finger, die am aktuellen Event beteiligt sind:
Beim touchstart eine Liste der Finger
beim touchmove eine Liste der Finger, die sich bewegt haben
beim touchend eine Liste der Finger, die die Touchoberfläche verlassen haben
length gibt die Anzahl der Finger zurück
targetTouches
Alle Touch-Ziele, die zu diesem Event gehören
touches
Eine Liste aller Finger, die momentan auf der Touchoberfläche liegen
scale
Der Abstand zwischen zwei Fingern seit dem Start des Events.
Der Anfangswert ist 1.0.
Die Geste für ein Pinch Close (Verkleinern mit zwei Fingern – Herauszoomen) ist ein Wert < 1.0,
die Geste für ein Pinch Open (Vergrößern – Zoomen) ist ein Wert > 1.0

rotation
Das Delta eines Drehen des Geräts seit dem Start des Events in Grad.
positiv bei einer Drehung im Uhrzeigersinn, negativ sonst.
Der Anfangswert ist 0.0

Event Eigenschaften

bubbles (boolean)
Gibt an, ob ein Ereignis aufsteigen kann.
cancelable (boolean)
Gibt an, ob die vorgegebene Aktion verhindert werden kann.
currentTarget
Gibt die Targets (die Elemente, für die der Event Handler registriert wurde) zurück, deren Event Listener augenblicklich durchgeführt werden.
defaultPrevented (DOM3)
Ob das Event gecancelt wurde oder nicht. Gibt nur dann true zurück, wenn cancelable == true und preventDefault aufgerufen wurde.
eventPhase (unsigned short)
Gibt die Phase zurück, in der sich ein Ereignis augenblicklich befindet: CAPTURING_PHASE (1), AT_TARGET (2) oder BUBBLING_PHASE (3)
isTrusted (DOM3)
Ob das Event vom Browser oder von einem Script gefeuert wurde
target (readonly)
Referenz auf das Objekt, an welches das Ereignis ursprünglich gesendet wurde
timeStamp
Zeit in Millisekunden, zu der ein Ereignis erzeugt wurde. Kann auf einigen Plattformen nicht verfügbar sein. In diesem Fall wird 0 zurückgegeben.
type
Typ des Ereignis (click, keyPress, load, ...) als String
event type event target