JavaScript - Event Capturing: A Beginner's Guide

Hallo zusammen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der Event Capturing. Keine Sorge, wenn ihr vorher noch nie eine Zeile Code geschrieben habt – ich werde euer freundlicher Guide sein, und wir werden dieses Konzept gemeinsam Schritt für Schritt erkunden. Also, holt euch ein Getränk nach Wahl und tauchen wir ein!

Was ist Event Capturing?

Bevor wir uns den Details zuwenden, beginnen wir mit einer einfachen Analogie. Stellt euch vor, ihr seid bei einer Familiengathering, und euer可爱的小表弟 sagt etwas Lustiges. Das Lachen beginnt bei den Großeltern (der ältesten Generation), dann bewegt es sich zu euren Eltern und schließlich zu euch. Dies ist ähnlich, wie Event Capturing in JavaScript funktioniert!

In der Welt der Webentwicklung ist Event Capturing eine Phase der Event-Propagation, bei der ein Event zuerst vom äußersten Element erfasst und dann an die inneren Elemente weitergegeben wird. Es ist wie ein Spiel "das Paket weiterreichen", aber mit Events!

Lassen wir das in mehr technische Begriffe aufschlüsseln:

1. Wenn ein Event auf einer Webseite auftritt (wie ein Klick), passiert es nicht nur auf dem Element, auf das ihr geklickt habt.
2. Das Event beginnt an der Spitze des DOM (Document Object Model) Baumes.
3. Es bewegt sich dann durch alle übergeordneten Elemente, bis es das Ziel-Element erreicht.
4. Diese absteigende Reise nennt man "Event Capturing."

Beispiel: Grundlegendes Event Capturing

Schauen wir uns ein einfaches Beispiel an, um Event Capturing in Aktion zu sehen. Wir erstellen eine einfache HTML-Struktur und fügen etwas JavaScript hinzu, um zu demonstrate, wie Capturing funktioniert.

<div id="outer">
<div id="middle">
<div id="inner">Klicke mich!</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', function() {
console.log('Äußeres div geklickt');
}, true);

middle.addEventListener('click', function() {
console.log('Mittleres div geklickt');
}, true);

inner.addEventListener('click', function() {
console.log('Inneres div geklickt');
}, true);
</script>

In diesem Beispiel haben wir drei verschachtelte <div>-Elemente. Der JavaScript-Code fügt jedem Div Klick-Event-Listener hinzu. Der Parameter true in addEventListener aktiviert Event Capturing.

Wenn ihr auf das innerste Div klickt, werdet ihr folgende Ausgabe in der Konsole sehen:

Äußeres div geklickt
Mittleres div geklickt
Inneres div geklickt

Dies zeigt, dass das Event vom äußersten Element zum innersten weitergegeben wird. Es ist, als würde das Event auf dem Weg zum Ziel "Hallo!" zu jedem Elternteil sagen.

Beispiel: Verhindern von Standardverhalten

Manchmal möchten wir das Standardverhalten eines Events stoppen. Zum Beispiel das Absenden eines Formulars oder das Folgen eines Links verhindern. Sehen wir uns an, wie wir dies mit Event Capturing tun können:

<div id="container">
<a href="https://www.example.com" id="link">Klicke mich!</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('Container geklickt');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('Link geklickt');
}, true);
</script>

In diesem Beispiel haben wir einen Link innerhalb einer Container-Div. Der Event-Listener des Containers verwendet event.preventDefault(), um die Standardaktion des Links zu stoppen.

Wenn ihr auf den Link klickt, werdet ihr sehen:

Container geklickt
Link geklickt

Aber der Link wird euch nicht actually zur URL weiterleiten. Es ist, als würde der Container sagen: "Nein, wir bleiben genau hier!"

Beispiel: Capturing und Stoppen der Propagation

Manchmal möchten wir verhindern, dass das Event weiter durch den DOM-Baum nach unten travels. Wir können dies mit event.stopPropagation() tun. Sehen wir uns das an:

<div id="grandparent">
<div id="parent">
<div id="child">Klicke mich!</div>
</div>
</div>

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
console.log('Großelternteil geklickt');
}, true);

parent.addEventListener('click', function(event) {
console.log('Elternteil geklickt');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('Kind geklickt');
}, true);
</script>

In diesem familienorientierten Beispiel, wenn ihr auf das Kind-Div klickt, werdet ihr nur sehen:

Großelternteil geklickt
Elternteil geklickt

Das Event stoppt bei dem Elternteil und erreicht nie das Kind. Es ist, als würde der Elternteil sagen: "Das ist weit genug, junger Event!"

Fazit

Und das war's, Leute! Wir haben die Welt des Event Capturing durchquert, von seinem grundlegenden Konzept bis hin zum Verhindern von Standardverhalten und dem Stoppen der Propagation. Denkt daran, Event Capturing ist nur ein Teil des Event-Flusses in JavaScript. Es ist wie die Eröffnungsphase bevor das Hauptereignis beginnt (wörtlich gemeint).

Hier ist eine schnelle Zusammenfassung der Methoden, die wir verwendet haben:

Methode	Beschreibung
addEventListener(event, function, useCapture)	Fügt ein Ereignis-Handler einem Element hinzu. Setzt useCapture auf true für Event Capturing.
event.preventDefault()	Verhindert die Standardaktion des Events.
event.stopPropagation()	Stoppt die Weitergabe des Events durch den DOM-Baum, verhindert thereby das Benachrichtigen der übergeordneten Handler des Events.

Übt diese Konzepte, spielt mit dem Code und bald werdet ihr Events wie ein Profi erfassen! Denkt daran, im Programmieren, wie im Leben, ist die Reise ebenso wichtig wie das Ziel. Frohes Coden und mögen eure Events stets gut erfasst werden!

Credits: Image by storyset