Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Занурення подій». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Занурення подій (event capturing)** - це етап, коли подія йде згори вниз по дереву DOM: від кореня документа (`window` → `document` → `html` → `body` → …) до елемента, на якому подія відбулася. **Ключове:** після занурення настає етап **спливання (bubbling)** - у зворотному напрямку, знизу вгору.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення > **Занурення подій (event capturing)** - це етап, коли подія **йде згори вниз по дереву DOM**, > від кореня документа (`window` → `document` → `html` → `body` → …) > **до елемента, на якому подія відбулася**. Після цього настає етап **спливання (bubbling)** - у зворотному напрямку (знизу вгору). --- ## Етапи проходження події Кожна подія в DOM проходить **три фази**: 1. **Занурення (capturing phase)** - подія йде згори вниз. 2. **Ціль (target phase)** - подія досягає елемента, на якому відбулася. 3. **Спливання (bubbling phase)** - подія піднімається назад угору. --- ### Візуально ```javascript window ↓ document ↓ <html> ↓ <body> ↓ <div id="parent"> ↓ <button id="child"> ← подія відбулася тут ↑ <div id="parent"> ↑ <body> ↑ <html> ↑ document ↑ window ``` Стрілки вгору - спливання. Стрілки вниз - занурення. --- ## Приклад: обробники з фазами ```javascript <div id="parent"> <button id="child">Клікни</button> </div> ``` ```javascript const parent = document.getElementById('parent'); const child = document.getElementById('child'); parent.addEventListener('click', () => { console.log('Батько - спливання'); }); parent.addEventListener('click', () => { console.log('Батько - занурення'); }, true); // ← третій аргумент = true → слухаємо на етапі занурення child.addEventListener('click', () => { console.log('Кнопка'); }); ``` При кліку по кнопці результат буде: ```javascript Батько - занурення Кнопка Батько - спливання ``` Чому так: - Спочатку подія **спускається вниз** → спрацьовує обробник "на зануренні". - Потім доходить до кнопки (ціль). - Далі **спливає назад** → спрацьовує обробник "на спливанні". --- ## Як увімкнути фазу занурення Щоб обробник спрацював **на етапі занурення**, у `addEventListener` передають третій аргумент: ```javascript element.addEventListener('click', handler, true); ``` або сучасний варіант: ```javascript element.addEventListener('click', handler, { capture: true }); ``` --- ## Приклад: два обробники на різних фазах ```javascript document.body.addEventListener('click', () => console.log('body capture'), true); document.body.addEventListener('click', () => console.log('body bubble')); ``` Клік по кнопці всередині body: ```javascript body capture button (target) body bubble ``` --- ## Коли використовувати занурення У реальній практиці воно потрібне **рідко**, але корисне, коли: - потрібно **перехопити подію раніше**, ніж вона дійде до цілі (наприклад, скасувати дію); - потрібен **глобальний контроль** за подіями (наприклад, для логування, трекінгу); - у **вкладених компонентах**, де важливе пріоритетне спрацювання "згори". --- ## Порівняння зі спливанням | Фаза | Напрямок | Коли спрацьовує | Як увімкнути | |---|---|---|---| | **Занурення (capturing)** | згори вниз | до цілі | `{ capture: true }` або `true` | | **Ціль (target)** | - | на елементі, де відбулася подія | завжди | | **Спливання (bubbling)** | знизу вгору | після цілі | типово | --- ## Важливо - Типово всі обробники слухають спливання, якщо не вказано `capture: true`. - Можна слухати **обидва етапи одночасно**, встановивши два обробники з різними налаштуваннями. - `stopPropagation()` зупиняє подію **на будь-якій фазі** (і під час занурення, і під час спливання).Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.