Урок 6

Урок 6 – Делегування Подій: Як Досягти Ефективності 🎯✨

Ласкаво просимо на урок 6! Тепер ви вже експерт із подій: натискання, наведення, введення тексту — усе це ви освоїли. Але що робити, якщо ваша вебсторінка заповнена динамічними елементами, які навіть не існували під час завантаження сторінки? Не хвилюйтеся! Делегування подій тут, щоб врятувати день (і ваші нерви).

Делегування подій – це як староста у класі: замість того, щоб кожен учень сам вирішував свої проблеми, вони звертаються до старости, який передає інформацію вчителю. Легко, елегантно й усі щасливі.

Що Таке Делегування Подій? 🤔

Делегування подій – це техніка, коли ви додаєте обробник подій до батьківського елемента, а він “слухає” події на своїх дочірніх елементах. Замість того, щоб додавати обробник до кожного елемента, ви делегуєте це завдання спільному предку.

Секрет у тому, що події в JavaScript піднімаються вгору. Коли подія відбувається на дочірньому елементі, вона піднімається до батьківських елементів, спрацьовуючи на будь-яких слухачах на своєму шляху. Це означає, що ви можете перехопити події навіть на тих елементах, які були додані динамічно.

Готуємо Майданчик для Експериментів 🛠️

Створіть нову папку для цього уроку (або використайте вашу папку DOM_Project):
```
mkdir Lesson6
cd Lesson6
```

Створіть HTML-файл з назвою index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Делегування Подій</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #parent-container { border: 2px solid lightblue; padding: 10px; margin-top: 20px; }
        .child { margin: 5px 0; padding: 5px; border: 1px dashed gray; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Майданчик Делегування Подій 🎢</h1>
    <button id="add-child-btn">Додати Новий Елемент</button>
    <div id="parent-container">
        <div class="child">Елемент 1</div>
        <div class="child">Елемент 2</div>
        <div class="child">Елемент 3</div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Створіть JavaScript-файл з назвою script.js:

const parentContainer = document.getElementById("parent-container");
const addChildBtn = document.getElementById("add-child-btn");

// Делегування подій: слухаємо кліки на дочірніх елементах через батьківський елемент
parentContainer.addEventListener("click", function(event) {
    if (event.target.classList.contains("child")) {
        alert(`Ви натиснули на ${event.target.textContent}`);
    }
});

// Додавання нових дочірніх елементів динамічно
addChildBtn.addEventListener("click", function() {
    const newChild = document.createElement("div");
    newChild.classList.add("child");
    newChild.textContent = `Елемент ${parentContainer.children.length + 1}`;
    parentContainer.appendChild(newChild);
});

Запускаємо Проєкт через Caddy 🌐

Якщо ви вже встановили Caddy, запуск сервера — це дуже просто:

Перейдіть до папки вашого проєкту:
```
cd Lesson6
```
Запустіть сервер Caddy:
```
caddy file-server --listen :8080
```
Відкрийте браузер:
- Перейдіть за адресою http://localhost:8080, щоб переглянути свій проєкт у дії.

І це все! Тепер ваш проєкт запущено, і ви можете взаємодіяти з ним у реальному часі. Не забувайте натискати Ctrl + F5, якщо зміни не відображаються одразу.

Як Це Працює ⚙️

Початкова Налаштування: parentContainer містить три елементи (Елемент 1, Елемент 2, і Елемент 3).
Додаємо Обробник до Батьківського Елемента: Замість додавання обробника до кожного елемента, ми додаємо його до батьківського елемента. Завдяки механізму bubbling кліки на дочірніх елементах перехоплюються батьківським.
Динамічні Елементи: Натиснувши кнопку “Додати Новий Елемент”, ви динамічно створюєте нові дочірні елементи. І обробник батьківського елемента працює для них автоматично — без додаткового коду!

Чому Використовувати Делегування Подій? 🚀

Ефективність: Вам не потрібно додавати обробники подій до кожного елемента.
Простота: Один обробник на всіх! Ідеально для динамічного контенту.
Продуктивність: Менше обробників означає кращу продуктивність, особливо для великих додатків.

Перевірте Свої Сили 🧪

Відкрийте браузер і перейдіть за адресою http://localhost:8080.
Натисніть на існуючі елементи (Елемент 1, Елемент 2, Елемент 3), щоб побачити спливаюче повідомлення.
Додайте нові елементи за допомогою кнопки “Додати Новий Елемент” і натисніть на них. Обробник батьківського елемента працює ідеально!

Що Далі?

Відмінна робота! Тепер ви знаєте, як ефективно працювати з подіями за допомогою делегування. У наступному уроці ми поринемо в анімації JavaScript, де ваші сторінки будуть рухатися, стрибати та зникати, немов вони влаштували танцювальну вечірку.

До зустрічі у Уроці 7 – Анімації JavaScript: Додаємо Життя до Ваших Сторінок!

Тепер ідіть і делегуйте події, як справжній профі! 🎠