7.1 Event Bubbling (Спливання подій)
У JavaScript події, які відбуваються в одному елементі, можуть розповсюджуватися по DOM-дереву. Цей процес називається поширенням подій і включає два основні механізми: спливання подій (event bubbling) та перехоплення подій (event capturing).
Механізми поширення подій:
- Event Bubbling (Спливання подій).
- Event Capturing (Перехоплення подій).
Спливання подій — це процес, при якому подія, що виникла в дочірньому елементі, послідовно поширюється вгору по ланцюжку батьківських елементів до кореневого елемента (зазвичай document).
Пояснення:
- Коли кнопка
childнатиснута, спочатку викликається обробник події на елементіchild(Child clicked) - Потім подія спливає до елемента
parent, і викликається його обробник (Parent clicked)
Приклад:
<!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 (Перехоплення подій)
Перехоплення подій — це процес, при якому подія спочатку поширюється від кореневого елемента вниз по ланцюжку батьківських елементів до цільового елемента, на якому сталася подія.
Щоб використовувати перехоплення подій, потрібно встановити параметр capture у true при додаванні обробника подій.
Пояснення:
- Коли кнопка
childнатиснута, спочатку викликається обробник події на елементі parent (Parent clicked) завдяки встановленню параметраcaptureуtrue - Потім подія досягає цільового елемента
child, і викликається його обробник (Child clicked)
Приклад:
<!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 Трифазна модель поширення подій
У процесі обробки події в DOM беруть участь три фази:
1. Capturing Phase (Фаза перехоплення). Подія поширюється від кореневого елемента (зазвичай document) вниз по ланцюжку батьківських елементів до цільового елемента.
2. Target Phase (Фаза цілі). Подія досягає цільового елемента, на якому сталася подія.
3. Bubbling Phase (Фаза спливання). Подія поширюється від цільового елемента вгору по ланцюжку батьківських елементів до кореневого елемента.
Контроль поширення подій
Існують методи для управління поширенням подій:
stopPropagation(). Зупиняє подальше поширення події як під час спливання, так і під час перехоплення.stopImmediatePropagation(). Зупиняє подальше поширення події і запобігає виконанню інших обробників подій на поточному елементі.preventDefault(). Скасовує дію за замовчуванням, пов'язану з подією (наприклад, відправка форми при натисканні кнопки).
7.4 Приклад використання stopPropagation
Пояснення:
- Коли кнопка
childнатиснута, викликається обробник події на елементіchild(Child clicked) - Спливання події зупиняється за допомогою
event.stopPropagation(), і обробник події на елементі parent не викликається
<!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(); // Зупиняє спливання події
});
</script>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ