7.1 Event Bubbling (Wynurzanie zdarzeń)
W JavaScript zdarzenia, które występują w jednym elemencie, mogą rozchodzić się w drzewie DOM. Proces ten nazywa się propagacją zdarzeń i obejmuje dwa główne mechanizmy: wynurzanie zdarzeń (event bubbling) i przechwytywanie zdarzeń (event capturing).
Mechanizmy propagacji zdarzeń:
- Event Bubbling (Wynurzanie zdarzeń).
- Event Capturing (Przechwytywanie zdarzeń).
Wynurzanie zdarzeń to proces, w którym zdarzenie występujące w elemencie potomnym rozprzestrzenia się
w górę łańcucha rodziców do elementu korzeniowego (zwykle document).
Wyjaśnienie:
- Kiedy przycisk
childjest kliknięty, najpierw uruchamia się handler zdarzeń na elemenciechild(Child clicked) - Następnie zdarzenie wynurza się do elementu
parenti uruchamia jego handler (Parent clicked)
Przykład:
<!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 (Przechwytywanie zdarzeń)
Przechwytywanie zdarzeń to proces, w którym zdarzenie najpierw rozprzestrzenia się od elementu korzeniowego w dół łańcucha rodziców do docelowego elementu, na którym wystąpiło zdarzenie.
Aby użyć przechwytywania zdarzeń, należy ustawić parametr capture na true przy dodawaniu handlera zdarzeń.
Wyjaśnienie:
-
Kiedy przycisk
childjest kliknięty, najpierw uruchamia się handler zdarzeń na elemencie parent (Parent clicked) dzięki ustawieniu parametrucapturenatrue -
Następnie zdarzenie dociera do docelowego elementu
childi uruchamia jego handler (Child clicked)
Przykład:
<!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 Trójfazowy model propagacji zdarzeń
W procesie obsługi zdarzenia w DOM uczestniczą trzy fazy:
1. Capturing Phase (Faza przechwytywania). Zdarzenie rozprzestrzenia się od elementu korzeniowego (zwykle document) w dół łańcucha rodziców do docelowego elementu.
2. Target Phase (Faza celu). Zdarzenie dociera do docelowego elementu, na którym wystąpiło zdarzenie.
3. Bubbling Phase (Faza wynurzania). Zdarzenie rozprzestrzenia się od docelowego elementu w górę łańcucha rodziców do elementu korzeniowego.
Kontrola propagacji zdarzeń
Istnieją metody do zarządzania propagacją zdarzeń:
stopPropagation(). Zatrzymuje dalsze rozprzestrzenianie się zdarzenia zarówno podczas wynurzania, jak i przechwytywania.stopImmediatePropagation(). Zatrzymuje dalsze rozprzestrzenianie się zdarzenia i zapobiega wykonywaniu innych handlerów zdarzeń na bieżącym elemencie.preventDefault(). Anuluje domyślne działanie związane ze zdarzeniem (np. wysłanie formularza po kliknięciu przycisku).
7.4 Przykład użycia stopPropagation
Wyjaśnienie:
- Kiedy przycisk
childjest kliknięty, uruchamia się handler zdarzeń na elemenciechild(Child clicked) - Wynurzanie zdarzenia zostaje zatrzymane za pomocą
event.stopPropagation(), a handler zdarzeń na elemencie parent się nie uruchamia
<!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(); // Zatrzymuje wynurzanie zdarzenia
});
</script>
</body>
</html>
GO TO FULL VERSION