Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке "делегування подій"?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Делегування подій** - це техніка, за якої ми **вішаємо один обробник на батьківський елемент**, а не на кожен дочірній, і за допомогою `event.target` визначаємо, **на якому нащадку відбулася подія**. **Ключове:** делегування ґрунтується на спливанні подій і автоматично працює навіть з елементами, доданими пізніше.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Визначення > **Делегування подій** - це техніка, за якої ми **вішаємо один обробник на батьківський елемент**, > а не на кожен дочірній, і за допомогою `event.target` визначаємо, **на якому нащадку відбулася подія**. Тобто: ми "перехоплюємо" сплилу подію на рівні батька, замість того щоб вішати безліч обробників на кожен елемент. --- ## Приклад без делегування ```javascript <ul> <li>Головна</li> <li>Каталог</li> <li>Контакти</li> </ul> <script> document.querySelectorAll('li').forEach((li) => { li.addEventListener('click', () => { console.log('Клік по пункту:', li.textContent); }); }); </script> ``` Мінуси: - створюється **багато обробників** (по одному на кожен `<li>`), - нові елементи, додані динамічно, **не будуть прослуховуватися**. --- ## Приклад з делегуванням ```javascript <ul id="menu"> <li>Головна</li> <li>Каталог</li> <li>Контакти</li> </ul> <script> const menu = document.querySelector('#menu'); menu.addEventListener('click', (event) => { if (event.target.tagName === 'LI') { console.log('Клік по пункту:', event.target.textContent); } }); </script> ``` Тепер всього **один обробник**, і він: - ловить кліки від усіх `<li>` (завдяки спливанню), - працює навіть для **нових пунктів**, доданих через JS. --- ## Як це працює 1. Користувач клікає на конкретний `<li>`. 2. Подія **спливає** вгору до `<ul>`. 3. На рівні `<ul>` стоїть один обробник. 4. Через `event.target` ми дізнаємося, **по якому елементу клікнули**. --- ## Приклад з динамічним контентом ```javascript menu.insertAdjacentHTML('beforeend', '<li>Про нас</li>'); // новий елемент теж буде "прослуховуватися" - нічого додавати не потрібно ``` Делегування працює автоматично навіть з елементами, доданими пізніше. --- ## Приклад 2: делегування для кнопок "Видалити" ```javascript <ul id="list"> <li>Елемент 1 <button class="delete">×</button></li> <li>Елемент 2 <button class="delete">×</button></li> <li>Елемент 3 <button class="delete">×</button></li> </ul> ``` ```javascript list.addEventListener('click', (e) => { if (e.target.classList.contains('delete')) { e.target.closest('li').remove(); // видаляємо батьківський елемент } }); ``` Один обробник - і можна видаляти будь-яку кількість елементів. Без делегування довелося б вішати слухач на кожну кнопку. --- ## Переваги делегування | Перевага | Опис | |---|---| | Менше коду | Один обробник замість десятків | | Ефективність | Менше навантаження на пам'ять і CPU | | Гнучкість | Працює з динамічно доданими елементами | | Зручність | Всі події обробляються централізовано | --- ## Важливо пам'ятати - `event.target` - елемент, на якому **відбулася подія**; може бути **вкладеним** (наприклад, всередині `<li>`). - Іноді потрібно піднятися до батька: ```javascript e.target.closest('li') ``` - безпечний спосіб знайти потрібний елемент. - Якщо всередині елементів є кнопки, посилання тощо, і ти не хочеш, щоб клік по них теж оброблявся - додай перевірку або `stopPropagation()`. --- ## Підсумок | Поняття | Що це | |---|---| | **Делегування подій** | Призначення одного обробника на батька для обробки подій усіх нащадків | | **Ґрунтується на** | Спливанні подій | | **Головний інструмент** | `event.target` і `closest()` | | **Навіщо потрібно** | Скоротити код, прискорити роботу, зручно обробляти динамічний DOM | --- > **Запам'ятай просто:** > Делегування - це коли **"батько слухає за дітей"**. > Один обробник - тисячі кліків під контролем.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.