Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Спливання подій». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Спливання подій (event bubbling)** - це механізм, при якому подія, що сталася на вкладеному елементі, передається (спливає) вгору по дереву DOM до його батьків. **Ключове:** якщо ти клікнув по кнопці, браузер спочатку обробить подію на кнопці, а потім підніме її до контейнера, body і навіть document.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення > **Спливання подій (event bubbling)** - це механізм, при якому подія, що сталася на вкладеному елементі, **передається (спливає)** вгору по дереву DOM до його батьків. Іншими словами: якщо ти клікнув по кнопці, браузер спочатку обробить подію на **кнопці**, а потім підніме її до **контейнера**, **body** і навіть **document**. --- ## Приклад DOM-структури ```javascript <div id="parent"> <button id="child">Клікни мене</button> </div> ``` --- ## Приклад: як спливає подія ```javascript document.querySelector('#child').addEventListener('click', () => { console.log('Кнопка'); }); document.querySelector('#parent').addEventListener('click', () => { console.log('Батько'); }); document.body.addEventListener('click', () => { console.log('BODY'); }); ``` Тепер клік по кнопці (`#child`) виведе: ```javascript Кнопка Батько BODY ``` Спочатку спрацював обробник **на елементі**, де клікнули, потім подія "спливла" вгору по дереву до `body`. --- ## Механізм спливання 1. Подія **виникає** на конкретному елементі → `event.target`. 2. Потім вона **передається вгору**: `target → його батько → document → window`. 3. На кожному рівні викликаються обробники, якщо вони є. --- ## Візуально ```javascript <button> → <div> → <body> → <html> → document ``` Кожен рівень може "почути" подію, якщо на ньому є обробник. --- ## Зупинка спливання Іноді не потрібно, щоб подія підіймалася далі. Тоді використовується: ```javascript event.stopPropagation(); ``` ```javascript child.addEventListener('click', (e) => { console.log('Кнопка'); e.stopPropagation(); // зупинили спливання }); ``` Тепер спрацює тільки: ```javascript Кнопка ``` --- ## Навіщо потрібне спливання ### 1. Делегування подій (економія обробників) Можна повісити **один обробник** на батьківський елемент і ловити події від його дітей. ```javascript <ul id="menu"> <li>Головна</li> <li>Каталог</li> <li>Контакти</li> </ul> ``` ```javascript menu.addEventListener('click', (e) => { if (e.target.tagName === 'LI') { console.log('Клік по пункту:', e.target.textContent); } }); ``` Працює навіть для нових `<li>`, доданих динамічно. Це неможливо без спливання. --- ### 2. Глобальні слухачі Можна слухати події на всьому документі: ```javascript document.addEventListener('click', (e) => { console.log('Клік по сторінці'); }); ``` --- ## Що не спливає Деякі події **не спливають**, наприклад: - `blur` / `focus` - `mouseenter` / `mouseleave` (у них є аналоги, які спливають - `focusin` і `focusout`). --- ## Підсумок | Поняття | Опис | |---|---| | **Спливання подій** | Процес, при якому подія підіймається від вкладеного елемента до батьків | | **event.target** | Елемент, де подія сталася | | **event.currentTarget** | Елемент, чий обробник зараз виконується | | **event.stopPropagation()** | Зупиняє спливання | | **Використовується для** | Делегування, глобальних обробників, логування |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.