Event Target, Type und Timestamp

Javascript EventType, EventTarget

event.target bzw. event.currentTarget gehören neben event.type zu den wichtigsten Informationen des event-Objekts. Jedes Javascript-Event bringt Informationen mit, die das Ereignis und seinen aktuellen Zustand beschreiben.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Das Event Object

Die Eigenschaften eines Events identifizieren das auslösende Element (event.target oder event.currentTarget), den Typ des Events (event.type) und den Zeitpunkt des Eintreffens (event.timeStamp). Mit den Eigenschaften des event-Objekts 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.

event.target Das Element, das das Ereignis gemeldet hat
event.currentTargetDas Element, an das der eventListener gebunden ist
event.typeDas auslösende Event
event.timeStampZeitpunkt des Events
event.clientXDie x-Position des Mausklicks relativ zum Browserfenster
event.clientYDie y-Position des Mausklicks relativ zum Browserfenster
event.offsetXDie x-Position des Mausklicks relativ zum Element
event.offsetYDie y-Position des Mausklicks relativ zum Element
event.pageXDie x-Position des Mausklicks relativ zur Seite
event.pageYDie y-Position des Mausklicks relativ zur Seite
event.screenXDie x-Position des Mausklicks relativ zum Screen
event.screenYDie y-Position des Mausklicks relativ zum Screen

Event als Argument

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

Symbolbild Javascript Events
<div class="demo">
	<figure>
		<img id="citrus" src="citrus.svg" width="606" height="444" alt="…">
		<figcaption></figcaption>
	</figure>
</div>
const citrus = document.querySelector ("#citrus");
citrus.addEventListener ("click", function (e) {
	console.log ("event", e);
});

Der einfachste Weg zu den Eigenschaften des Events führt über die Konsole: console.log("event", e) liefert alle Informationen über das Event-Objekt. Die Liste ist lang, aber viele der Eigenschaften werden selten oder gar nicht benutzt.


▶ event – MouseEvent {isTrusted: true, screenX: 690, screenY: 363, …}

Das Argument e im Funktionsaufruf 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.

function showInfo (eve) {
	console.log ("event", eve);
}
const citrus = document.querySelector ("#citrus");
citrus.addEventListener ("click", showInfo);

Der Name für das Argument kann beliebig gewählt werden. Meist sehen wir Abkürzungen wie e, evt, eve oder auch gleich event.

event.target, event.currentTarget

Die Referenz auf das HTML-Element, auf dem sich Event abgespielt hat, gehört zu den wichtigsten Informationen: event.target oder event.currentTarget.

Das auslösende Element wird meist angesprochen, um CSS-Stile zu ändern oder dem Benutzer zusätzliche Informationen zur Verfügung zu stellen.

citrus.addEventListener ("click", function (evt) {
	console.log ("event.target", evt.target);
	evt.target.nextElementSibling.innerText = "Zitrusfrüchte";
});

▶ event.target – <img id="citrus" loading="lazy" src="citrus.svg" …>

Meist macht es keinen Unterschied, ob event.target oder event.currentTarget verwendet wird. Einen Unterschied gibt es allerdings: Sitzt der eventListener auf einem übergeordneten Element, liefert der Klick bei currentTarget das übergeordnete Element, und bei target das Element unter der Maus.

const demo = document.querySelector (".demo");
demo.addEventListener ("click", function (evt) {
	console.log ("event.target", evt.target);
	console.log ("event.currentTarget", evt.currentTarget);
})

event.target – <img id="citrus" loading="lazy" src="citrus.svg" … alt="…">
event.currentTarget –  ▶ <div class="demo">…</div>

Der feine Unterschied zwischen target und currentTarget:

  • event.target ist das Element, auf dem der Klick stattfand,
  • event.currentTarget ist das Element, an das der eventListener gebunden ist.

Events steigen wie Luftblasen nach oben. Der Klick wurde auf dem img-Element ausgeführt und steigt dann zum parent-Element und weiter zum div-Element mit der Klasse demo. Dieser Effekt wird bubbling genannt und ist ein Kapitel für sich: EventListener: capture oder bubble?.

event.type

An ein Element können mehrere eventListener gebunden werden, und dann rückt die Frage nach der Art des Events in den Vordergrund. Solche Situationen entstehen z.B. in Zeichenprogrammen oder Editoren.

function clickDrag (evt) {
	console.log ("drag oder click?", evt.type);
}

const figure = document.querySelector (".demo figure");
figure.addEventListener ("click", clickDrag);
figure.addEventListener ("drag", clickDrag);

event.timeStamp

Der Zeitpunkt, zu dem ein Event stattfindet, ist die Zeit im Millisekunden vom Laden des Dokuments bis zum Eintreten des Ereignisses. Der timeStamp wird vor allem für Performance-Betrachtungen abgefragt, z.B. vom Beginn einer Berechnung bis zum Ende Ende der Berechnung.

console.log ("event.timeStamp", event.timeStamp);
console.log ("dragged timeStamp", event.timeStamp);

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