Event Target, Type und Timestamp

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 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.

<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.

Generelle Eigenschaften von Events