Делегирование событий

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

Принцип работы делегирования

Суть делегирования заключается в том, что событие навешивается на родительский элемент, а обработчик проверяет, соответствует ли целевой элемент (target) критериям, которые нужны для обработки. Такой подход позволяет:

  • экономить ресурсы, избегая навешивания десятков или сотен обработчиков;
  • работать с элементами, которые добавляются в DOM динамически после инициализации скрипта;
  • упрощать управление событиями при большом количестве элементов.

В Dom7 это реализуется через метод .on(), который поддерживает делегирование с помощью дополнительного параметра селектор потомка.

Синтаксис делегирования в Dom7

$(parentSelector).on(eventType, childSelector, handler);
  • parentSelector — родительский элемент, на котором навешивается событие.
  • eventType — тип события, например 'click', 'input', 'change'.
  • childSelector — селектор потомка, события которого должны обрабатываться.
  • handler — функция-обработчик события.

Пример:

const $$ = Dom7;

$$('#menu').on('click', '.menu-item', function (event) {
  console.log('Нажат пункт меню:', $$(this).text());
});

В этом примере обработчик click установлен на элемент с id menu. Он срабатывает только если клик происходит по элементу с классом menu-item, даже если такой элемент добавлен в DOM после установки обработчика.

Доступ к целевому элементу

Внутри обработчика можно использовать объект события event для получения ссылки на элемент, на котором произошло событие:

$$('#container').on('click', '.button', function (event) {
  const clickedElement = event.target; // исходный элемент, на который кликнули
  const currentTarget = this;          // элемент, на котором установлен обработчик (родитель)
  
  console.log('Целевой элемент:', clickedElement);
  console.log('Элемент-обработчик:', currentTarget);
});

Разница между event.target и this:

  • event.target — элемент, на котором произошло событие.
  • this (в контексте обработчика Dom7) — элемент, на котором был навешан обработчик (родитель).

Поддержка нескольких событий

Dom7 позволяет навешивать несколько событий одновременно, что удобно при делегировании:

$$('#form').on('focus blur', 'input', function (event) {
  console.log('Событие на input:', event.type, $$(this).val());
});

В данном примере обработчик срабатывает как на focus, так и на blur для всех элементов input внутри формы.

Удаление делегированных событий

Удаление обработчиков в Dom7 возможно с помощью метода .off(). Важно указывать тот же тип события и селектор, что использовались при on:

function handler(event) {
  console.log('Нажат элемент:', $$(this).text());
}

$$('#list').on('click', '.item', handler);

// позже
$$('#list').off('click', '.item', handler);

Если не указать селектор потомка при off(), обработчик будет удалён с родителя полностью для данного события, но не для конкретных дочерних элементов.

Делегирование для динамически добавленных элементов

Особенно полезно делегирование при добавлении элементов после загрузки страницы:

const $$ = Dom7;

$$('#tasks').on('click', '.task', function () {
  console.log('Задача выбрана:', $$(this).text());
});

// добавление нового элемента динамически
$$('#tasks').append('<div class="task">Новая задача</div>');

Клик по вновь добавленной задаче сработает корректно, потому что событие навешано на родителя #tasks, а проверка происходит по селектору .task.

Делегирование с использованием нескольких селекторов

Dom7 поддерживает указание нескольких селекторов через запятую, что позволяет обрабатывать события для разных типов потомков одним обработчиком:

$$('#panel').on('click', '.btn, .link', function () {
  console.log('Элемент панели активирован:', $$(this).attr('class'));
});

Особенности и подводные камни

  1. События, которые не всплывают, не поддерживают стандартное делегирование. Например, focus и blur должны обрабатываться через их делегирующие аналоги focusin и focusout. В Dom7 это нужно учитывать:

    $$('#form').on('focusin', 'input', function () {
  console.log('Input в фокусе');
});

  2. Контекст this всегда родитель, поэтому для работы с потомком используется либо event.target, либо обёртка $$(event.target).

  3. Наследование событий: если событие происходит на вложенном элементе внутри нужного селектора, оно всё равно сработает. Можно уточнить обработку через проверку event.target и closest():

$$('#list').on('click', '.item', function (event) {
  const targetItem = $$(event.target).closest('.item');
  console.log('Нажат элемент:', targetItem.text());
});

Резюме возможностей делегирования в Dom7

  • Навешивание обработчиков на родителя с селектором потомка.
  • Поддержка нескольких событий одновременно.
  • Простое удаление делегированных обработчиков через .off().
  • Обработка динамически добавленных элементов без повторной инициализации.
  • Возможность комбинирования нескольких селекторов и фильтрации целевого элемента через event.target.

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

Оглавление