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. Die Eigenschaften eines Events identifizieren das auslösende Element (event target), den Typ des Events (event type) und den Zeitpunkt des Eintreffens (timestamp). Mit diesen Informationen findet das Script nicht nur heraus, welches Element das Event ausgelöst hat, sondern z.B. auch die Koordinaten der Maus oder des Fingers auf dem Viewport und welche Taste gedrückt wurde.

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

event als Parameter des Event Handlers
let target = document.querySelector ('#elem');

function tellMe (event) {
	console.log (event);
    let nodeName = event.target.nodeName;
            …
}

target.addEventListener ('click', tellMe );
target.addEventListener ('touch', tellMe );
target.addEventListener ('mouseover', tellMe );

Das Argument event im Funktionsaufruf function tellMe (event) 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 früher nicht event als Name gewählt werden, die meisten Scripte wählen einfach e oder evt als Abkürzung.

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.

▶ MouseEvent {isTrusted: true, screenX: 943, screenY: 318, clientX: 927, clientY: 232, …}

Anpassung der Referenzen auf das Event-Objekt

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.

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

document.querySelector("elem").addEventListener ("click", function (e) {
	let elem = e.target;
	let position = e.x + "/" + e.y;
	…
});

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
Eine Maus mit nur einer Taste wird nur 1 zurückgeben, eine Maus mit zwei Tasten kann 1 oder 3 zurückgeben.
buttonsBitmaske mit der Kombination der Maustasten
clientX/clientYMauskoordinaten relativ zum Fenster
ctrlKey (boolean)Gibt an, ob die Ctrl-Taste beim feuern des Ereignisses gedrückt war.
keyCodeLetzte gedrückte Taste. Das Zeichen mit String.fromCharCode(keyCode) lesen / IE-Event, tuts aber gut.
metaKeyOb die Metataste beim Auslösen des Events gedrückt war
movementX / movementYx-/y-Koordinaten des Mauszeigers relativ zur Position des letzten mousemove-Events
offsetX / offsetY x-/y-Koordinaten des Mauszeigers relativ zur Position des Zielelements.
pageX / pageY x-/y-Koordinaten des Mauszeigers relativ zum Dokument.
relatedTarget Gibt bei einem mouseover-Ereignis an, welches Element verlassen wurde. Bei einem mouseout gibt die Eigenschaft an, auf welchen Element die Maus bewegt wurde.
screenX / screenYSyntax: event.screenX / event.screenY
x-/y-Koordinate des Mauszeigers beim Eintreten des Ereignisses relativ zum Koordinatensystem des Fensters.
shiftKeyOb die Shifttaste beim Feuern des Events gedrückt war
whichMaustaste, die beim Eintreten des Events gedrückt war.

Informationen zu Touch-Events

Jedes Event bringt seine individuellen Eigenschaften mit. Touchscreens haben darüber hinaus eigene Events mit speziellen Eigenschaften.

changedTouchesListe 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
targetTouchesAlle Touch-Ziele, die zu diesem Event gehören
touchesEine Liste aller Finger, die momentan auf der Touchoberfläche liegen
scaleDer 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

Generelle Eigenschaften von Events

bubbles (boolean)Gibt an, ob ein Ereignis aufsteigen kann.
cancelable (boolean)Gibt an, ob die vorgegebene Aktion verhindert werden kann.
currentTargetGibt 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
timeStampZeit in Millisekunden, zu der ein Ereignis erzeugt wurde. Kann auf einigen Plattformen nicht verfügbar sein. In diesem Fall wird 0 zurückgegeben.
typeTyp des Ereignis (click, keyPress, load, ...) als String

Veraltete Techniken der Objekt-Erkennung

Um den unterschiedlichen Umgang mit dem Event-Objekt zwischen den Browsern anzupassen, wurden früher wilde Konstruktionen zur Objekt-Erkennung eingesetzt:

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

Dieser Abfrage egalisierte die unterschiedlichen Auffassungen der alten Browser. Das ist heute nicht mehr nötig.

IE6 / IE7 und IE8 sprachen das auslösende Element nicht mit target an, sondern mit srcElement. Der Unterschied ließ sich durch eine Objekt-Erkennung eliminieren:

let elem = (evt.target) ? evt.target : evt.srcElement;
event type event target