7.1 Event Bubbling (Ereignis-Bubbling)
In JavaScript können Ereignisse, die in einem Element auftreten, sich durch den DOM-Baum verbreiten. Dieser Prozess wird als Ereignisverbreitung bezeichnet und umfasst zwei Hauptmechanismen: Ereignis-Bubbling (event bubbling) und Ereignis-Capturing (event capturing).
Mechanismen der Ereignisverbreitung:
- Event Bubbling (Ereignis-Bubbling).
- Event Capturing (Ereignis-Capturing).
Ereignis-Bubbling ist der Prozess, bei dem ein Ereignis, das in einem Kind-Element ausgelöst wurde, der Reihe nach nach oben durch die Elternkette bis zum Stamm-Element (normalerweise document) weitergeleitet wird.
Erklärung:
- Wenn der Button
childgedrückt wird, wird zuerst der Ereignis-Listener auf dem Elementchildausgelöst (Child clicked) - Dann bubblet das Ereignis zum Element
parentund dessen Listener wird ausgelöst (Parent clicked)
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Ereignis-Capturing)
Ereignis-Capturing ist der Prozess, bei dem ein Ereignis zuerst vom Stamm-Element nach unten durch die Elternkette bis zum Ziel-Element, auf dem das Ereignis passiert ist, weitergeleitet wird.
Um Ereignis-Capturing zu nutzen, muss man den Parameter capture auf true setzen, wenn man einen Ereignis-Listener hinzufügt.
Erklärung:
- Wenn der Button
childgedrückt wird, wird zuerst der Ereignis-Listener auf dem Element parent ausgelöst (Parent clicked) dank des gesetzten Parameterscaptureauftrue - Dann erreicht das Ereignis das Ziel-Element
child, und dessen Listener wird ausgelöst (Child clicked)
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Dreiphasiges Modell der Ereignisverbreitung
Im Prozess der Ereignisverarbeitung im DOM sind drei Phasen beteiligt:
1. Capturing Phase (Phase des Capturing). Das Ereignis verbreitet sich vom Stamm-Element (normalerweise document) nach unten durch die Elternkette bis zum Ziel-Element.
2. Target Phase (Ziel-Phase). Das Ereignis erreicht das Ziel-Element, auf dem das Ereignis passiert ist.
3. Bubbling Phase (Bubble-Phase). Das Ereignis verbreitet sich vom Ziel-Element nach oben durch die Elternkette bis zum Stamm-Element.
Kontrolle der Ereignisverbreitung
Es gibt Methoden zur Steuerung der Ereignisverbreitung:
stopPropagation(). Stoppt die weitere Verbreitung des Ereignisses sowohl beim Bubbling als auch beim Capturing.stopImmediatePropagation(). Stoppt die weitere Verbreitung des Ereignisses und verhindert die Ausführung anderer Ereignis-Listener auf dem aktuellen Element.preventDefault(). Verhindert die Standardaktion, die mit dem Ereignis verbunden ist (z.B. das Absenden eines Formulars beim Drücken eines Buttons).
7.4 Beispiel für die Verwendung von stopPropagation
Erklärung:
- Wenn der Button
childgedrückt wird, wird der Ereignis-Listener auf dem Elementchildausgelöst (Child clicked) - Das Bubbling des Ereignisses wird mit
event.stopPropagation()gestoppt und der Ereignis-Listener auf dem Element parent wird nicht ausgelöst
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Stoppt das Bubbling des Ereignisses
});
</script>
</body>
</html>
GO TO FULL VERSION