Урок 6 – Делегирование событий: Эффективность на кончиках пальцев 🎯✨
Добро пожаловать на урок 6! К этому моменту вы уже мастер событий: клики, ввод текста, взаимодействие с элементами — вы уже как рок-звезда JavaScript. Но что делать, если ваша страница полна динамических элементов, которые появляются на ходу? Не переживайте! Делегирование событий – это ваш спасательный круг (и экономия нервов).
Делегирование событий – это как генеральный директор в офисе: он делегирует задачи менеджерам, а не бегает по каждому столу. Быстро, чётко и продуктивно.
Что такое делегирование событий? 🤔
Делегирование событий – это техника, когда вы добавляете обработчик событий на родительский элемент, который “слушает” события своих дочерних элементов. Вместо того чтобы добавлять обработчик на каждый элемент отдельно, вы передаёте задачу их общему предку.
Секрет в том, что события в JavaScript всплывают. Когда событие происходит на дочернем элементе, оно поднимается по дереву к родительским элементам, срабатывая на всех обработчиках, которые встретятся на пути. Это значит, что вы можете обрабатывать события даже на элементах, которые добавлены динамически.
Готовим полигон для тестов 🛠️
-
Создайте новую папку для этого урока (или используйте вашу папку
DOM_Project
):mkdir Lesson6 cd Lesson6
-
Создайте HTML-файл с названием
index.html
:<!DOCTYPE html> <html lang="ru"> <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
). - Добавляем обработчик на родительский элемент: Вместо того чтобы добавлять обработчики на каждый дочерний элемент, мы добавляем один обработчик на родителя. Благодаря механизму всплытия клики на дочерних элементах перехватываются родительским.
- Динамические элементы: Нажав кнопку “Добавить элемент”, вы динамически создаёте новые элементы. И обработчик на родителе работает для них автоматически — без дополнительного кода!
Почему использовать делегирование событий? 🚀
- Эффективность: Не нужно добавлять обработчики для каждого элемента.
- Простота: Один обработчик на всех! Идеально для динамического контента.
- Производительность: Меньше обработчиков – выше производительность, особенно в крупных приложениях.
Мини-проект: Список задач 📝
Применим делегирование событий для создания интерактивного списка задач, где задачи можно отмечать как выполненные.
-
Обновите ваш HTML:
<input type="text" id="task-input" placeholder="Добавьте задачу и нажмите Enter" /> <ul id="task-list"></ul>
-
Обновите ваш
script.js
:const taskInput = document.getElementById("task-input"); const taskList = document.getElementById("task-list"); // Добавляем задачи динамически taskInput.addEventListener("keydown", function(event) { if (event.key === "Enter" && taskInput.value.trim() !== "") { const taskItem = document.createElement("li"); taskItem.textContent = taskInput.value; taskItem.classList.add("task"); taskList.appendChild(taskItem); taskInput.value = ""; // Очищаем поле } }); // Используем делегирование для обработки кликов по задачам taskList.addEventListener("click", function(event) { if (event.target.classList.contains("task")) { event.target.style.textDecoration = "line-through"; // Помечаем как выполненное } });
Что дальше?
Отличная работа! Теперь вы знаете, как эффективно управлять событиями с помощью делегирования. На следующем уроке мы погрузимся в анимации JavaScript, где ваши страницы начнут двигаться, прыгать и исчезать, как будто они участвуют в шоу талантов.
До встречи в Уроке 7 – Анимации JavaScript: Добавляем Жизнь на Ваши Страницы!
Теперь идите и делегируйте, как настоящий мастер! 🎠