Event Type, Target und Position

Das Event Object

Jedes Event bringt Informationen mit, die das Ereignis und seinen aktuellen Zustand beschreiben. Diese Eigenschaften identifizieren den Typ des Events (event.type), das auslösende Element (event.target oder event.currentTarget), Position und Zeitpunkt des Eintretens (event.timeStamp).

So findet das Script heraus, welches Element das Event ausgelöst hat, bei Bedarf auch die Koordinaten der Maus oder des Fingers auf dem Viewport und welche Taste gedrückt wurde.

event type – Welches Event?

Das Event ist der zentrale Parameter des EventListener – der Typ des Events ist damit sofort sichtbar. An ein Element können allerdings mehrere eventListener gebunden werden, 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);

Die wichtigsten Ereignisse auf einer Webseite sind:

• "Benutzer hat etwas geklickt",
• "Benutzer hat etwas getippt",
• "hat ein Formular abgeschickt".

button.addEventListener("click", () => {})

form.addEventListener('submit', evt => {
  evt.preventDefault();
});

input.addEventListener("input", () => {})

input.addEventListener("change", () => {})

document.addEventListener('keydown', evt => {
  if (evt.key === 'Escape') {}
});

document.addEventListener('DOMContentLoaded', () => {});

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 (evt) {
	console.log ("event", evt);
});

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