jQuery Academy · Урок

Надёжное делегирование событий

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

Что такое делегирование событий?

Добро пожаловать в раздел о делегировании событий! Этот мощный приём помогает эффективно управлять событиями в веб-приложениях.

Вместо добавления множества обработчиков событий к отдельным элементам Вы добавляете один обработчик к общему родительскому элементу. Это похоже на одного «руководителя», который следит за всеми своими «дочерними элементами» и их определёнными действиями.

Прямая привязка: ограничение

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

В примере попробуйте нажать исходные кнопки. Затем через небольшую задержку появится новая кнопка. Попробуйте нажать новую кнопку — она не отреагирует!

$(document).ready(function() {
  // Assume basic HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Direct binding to existing items
  $('.item').on('click', function() {
    $(this).text('Directly clicked!');
  });

  // Simulate adding a new item after initial binding
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it wont respond!');
  }, 2000);
});

Понимание всплытия событий

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

Свойство event.target всегда указывает на исходный элемент, вызвавший событие, независимо от того, какой родитель его перехватил. Нажмите на элементы ниже и посмотрите вывод в консоли.

$(document).ready(function() {
  // Assume HTML like:
  // <div id="outer">
  //   <div id="middle">
  //     <button id="inner">Click Me</button>
  //   </div>
  // </div>

  $('#outer').on('click', function(event) {
    console.log('Outer div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#middle').on('click', function(event) {
    console.log('Middle div caught event. Target:', event.target.id || event.target.tagName);
  });

  $('#inner').on('click', function(event) {
    console.log('Inner button caught event. Target:', event.target.id || event.target.tagName);
  });
});

.on() в jQuery для делегирования

Метод .on() в jQuery можно использовать для делегирования событий, передав дополнительный аргумент selector. Его синтаксис выглядит так:

$(parentSelector).on(event, childSelector, handler);

Здесь обработчик события прикрепляется к parentSelector. Однако функция handler выполняется только в том случае, если событие возникло на дочернем элементе, соответствующем childSelector.

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

Теперь применим делегирование событий, чтобы решить проблему из сцены 2. Мы прикрепим обработчик к родительскому контейнеру (#my-list), но укажем, что он должен реагировать только на нажатия элементов, соответствующих .item.

Обратите внимание: теперь новая кнопка будет реагировать на нажатия!

$(document).ready(function() {
  // Assume HTML structure like:
  // <div id="my-list">
  //   <button class="item">Button 1</button>
  //   <button class="item">Button 2</button>
  // </div>

  // Event delegation: listener on the parent (#my-list)
  // It listens for clicks on any descendant matching '.item'
  $('#my-list').on('click', '.item', function() {
    $(this).text('Delegated click!');
  });

  // Simulate adding a new item after delegation setup
  setTimeout(function() {
    $('#my-list').append('<button class="item">New Delegated Item</button>');
    console.log('A new item was added after 2 seconds.');
    console.log('Try clicking the new item - it WILL respond!');
  }, 2000);
});

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

Главное преимущество, показанное в предыдущем примере, — способность делегирования событий корректно работать с динамически добавленными элементами.

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

Повышение производительности

Помимо работы с динамическим содержимым, делегирование событий даёт значительные преимущества в производительности:

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

Когда следует делегировать события

Делегирование событий — мощный инструмент, но оно нужно не всегда. Вот подходящие ситуации для его применения:

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

Проверьте свои знания

В каких из следующих сценариев лучше всего использовать делегирование событий?

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

Отличная работа! Вы изучили основные принципы делегирования событий в jQuery.

Мы рассмотрели, как .on() с помощью childSelector позволяет одному обработчику родительского элемента управлять событиями множества дочерних элементов, включая элементы, добавленные динамически. Этот приём очень важен для повышения производительности, упрощения кода и эффективной работы с динамическим содержимым в приложениях на jQuery.

Освоив делегирование, Вы сможете создавать надёжную и масштабируемую обработку событий!

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

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

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

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

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

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

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

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

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

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

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

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

Надёжное делегирование событий
Остановка распространения событий
Создание и вызов пользовательских событий

← Назад к jQuery Academy