JavaScript Academy · Урок

Шаблон делегирования событий

Обрабатывайте события множества дочерних элементов одним обработчиком родителя.

«Шаблон делегирования событий» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Один обработчик для всех

Делегирование событий означает, что один обработчик прикрепляется к общему предку вместо множества обработчиков на отдельных дочерних элементах. Поскольку события всплывают, родительский элемент получает щелчки от всех своих потомков.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Наивный подход

Без делегирования Вам пришлось бы перебрать каждый элемент и прикрепить обработчик. Это расточительно: требуется больше памяти, а элементы, добавленные позже, работать не будут.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

Подход с делегированием

Вместо этого прикрепите один обработчик к родительскому элементу и проверьте event.target, чтобы определить, на каком дочернем элементе произошёл щелчок.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Выбор правильной цели

Щелчок может прийтись на вложенный элемент. Используйте event.target.closest(selector), чтобы подняться по дереву и найти подходящего предка, соответствующего Вашему селектору.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Проверка перед обработкой

Всегда проверяйте, что щелчок соответствует нужному элементу. Ранний выход if (!item) return; не позволит обработчику завершиться с ошибкой, если пользователь щёлкнет по отступу или промежутку внутри контейнера.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Использование атрибутов данных

Распространённый шаблон — хранить идентификатор или действие каждого элемента в атрибуте data-*. Обработчик с делегированием считывает его из найденного элемента.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Вызов по действию

Для панелей инструментов с множеством кнопок задайте каждой кнопке атрибут data-action и выполните ветвление по его значению. Один обработчик обслуживает все кнопки.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Почему это хорошо масштабируется

При делегировании списку из 1000 строк нужен всего один обработчик вместо 1000. Это требует меньше памяти, ускоряет настройку и избавляет от цикла очистки при изменении строк.

Замечание о производительности

У делегирования есть небольшая цена: каждый подходящий случай события запускает Ваш обработчик, который затем выполняет фильтрацию. Для большинства приложений это несущественно по сравнению с выигрышем, но не прикрепляйте обработчики с делегированием к document для очень частых событий, например mousemove.

Выбор контейнера

Выберите ближайшего стабильного предка, содержащего все целевые элементы. Делегирование на небольшой контейнер (сам список) лучше, чем делегирование на document, поскольку обработчик будет срабатывать на меньшем числе несвязанных событий.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

Объединение с closest

closest() — основа делегирования. Он возвращает сам элемент, если тот соответствует условию, ближайшего подходящего предка или null. Благодаря этому делегирование безопасно работает с вложенной разметкой.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Быстрая проверка

Зачем использовать делегирование событий?

Итоги

Делегирование событий прикрепляет один обработчик к родительскому элементу и использует всплытие для обработки всех дочерних элементов. Используйте e.target.closest(selector), чтобы найти нужный элемент, добавляйте ранний возврат для проверки и считывайте атрибуты data-*, чтобы вызывать действия. Такой подход масштабируется до огромных списков и является стандартным для динамических пользовательских интерфейсов.

Часто задаваемые вопросы

Урок «Шаблон делегирования событий» бесплатный?

Да — полный текст урока «Шаблон делегирования событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Шаблон делегирования событий»?

Обрабатывайте события множества дочерних элементов одним обработчиком родителя. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Шаблон делегирования событий»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy