Делегирование событий | Учебник W3docs по JavaScript

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

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

На этой странице рассматривается:

Что такое делегирование событий и механизм всплытия, на котором оно основано
Почему оно экономит память и работает с динамически добавляемыми элементами
Надёжный паттерн event.target + closest() (и почему проверка tagName ненадёжна)
Чтение данных из кликнутых элементов с помощью атрибутов data-*
Типичные ошибки, включая события, которые не всплывают
Когда не стоит использовать делегирование

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

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

Если всплытие для вас в новинку, сначала прочитайте раздел Всплытие и погружение — именно этот механизм лежит в основе всей техники.

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

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

Как это работает

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

event.target — фактический элемент, с которым взаимодействовал пользователь (самый глубокий элемент). Именно его вы проверяете, чтобы определить, какой именно элемент был кликнут.
event.currentTarget — элемент, к которому присоединён обработчик (родительский). Внутри обычной функции это то же самое, что this.

Обработчик читает event.target, определяет, принадлежит ли он нужному дочернему элементу, и действует соответствующим образом.

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

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

Пример 1: обработка кликов по списку

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

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <!-- More items can be added dynamically -->
</ul>

<script>
  document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert('You clicked on ' + event.target.textContent);
    }
  });
</script>

Попробуйте сами »

Пояснение:

Обработчик события добавляется к элементу <ul>.
Когда кликают по пункту списка (<li>), событие всплывает до <ul> и вызывает обработчик.
Свойство event.target проверяется, чтобы убедиться, что клик пришёл именно от пункта списка.

Пример 2: управление кликами по кнопкам в динамическом интерфейсе

В интерфейсе с динамически добавляемыми кнопками делегирование событий позволяет эффективно обрабатывать клики по ним.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Dynamic Button Feedback Example</title>
    <style>
        #feedback {
            color: blue;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="buttonContainer">
    <!-- Buttons can be added or removed dynamically -->
    <button>Action 1</button>
    <button>Action 2</button>
</div>
<div id="feedback"></div>

<script>
    const buttonContainer = document.getElementById('buttonContainer');
    const feedback = document.getElementById('feedback');

    buttonContainer.addEventListener('click', function(event) {
        if (event.target.tagName === 'BUTTON') {
            feedback.textContent = 'Button clicked: ' + event.target.textContent;
        }
    });
</script>
</body>
</html>

Попробуйте сами »

Пояснение:

Единственный обработчик события click добавляется к элементу-контейнеру.
Он проверяет, является ли кликнутый элемент кнопкой, и реагирует на клик в зависимости от того, по какой кнопке кликнули.

Более надёжный паттерн: использование `closest()`

Проверка event.target.tagName работает только в том случае, если пользователь кликает именно по тому элементу, который вы ожидаете. Но кнопки и пункты списков нередко содержат вложенную разметку — иконку, <span>, <strong>. Если пользователь кликнул по этому внутреннему элементу, event.target окажется <span>, а не <button>, и проверка tagName === 'BUTTON' молча провалится.

Element.closest(selector) решает эту проблему. Метод идёт вверх от event.target и возвращает ближайший предок (включая сам элемент), соответствующий CSS-селектору, или null, если совпадений нет. Это делает делегирование устойчивым к вложенному содержимому.

<ul id="menu">
  <li class="menu-item"><span>Profile</span></li>
  <li class="menu-item"><span>Settings</span></li>
  <li class="menu-item"><span>Logout</span></li>
</ul>

<script>
  document.getElementById('menu').addEventListener('click', function (event) {
    // Find the .menu-item ancestor, even if a <span> was clicked.
    const item = event.target.closest('.menu-item');

    // closest() can return null (e.g. a click on padding around the items),
    // and we should ignore clicks outside this list entirely.
    if (!item || !this.contains(item)) return;

    console.log('Selected:', item.textContent.trim());
  });
</script>

Проверка !item || !this.contains(item) важна: closest() продолжает подниматься выше контейнера, поэтому без this.contains(item) вы можете совпасть с элементом за пределами списка. Здесь this — это <ul> (currentTarget).

Чтение данных с помощью атрибутов `data-*`

Определив, по какому элементу кликнули, вы обычно нуждаетесь в данных о нём — идентификаторе, имени действия, индексе строки. Жёсткое кодирование логики для каждого элемента сводит на нет смысл делегирования. Вместо этого храните данные в каждом элементе с помощью атрибута data-* и читайте их через dataset.

<div id="toolbar">
  <button data-action="save">Save</button>
  <button data-action="delete">Delete</button>
  <button data-action="share">Share</button>
</div>

<script>
  const actions = {
    save:   () => console.log('Saving...'),
    delete: () => console.log('Deleting...'),
    share:  () => console.log('Sharing...'),
  };

  document.getElementById('toolbar').addEventListener('click', function (event) {
    const button = event.target.closest('button[data-action]');
    if (!button) return;

    const handler = actions[button.dataset.action];
    if (handler) handler();
  });
</script>

Этот паттерн «карты действий» хорошо масштабируется: добавьте новую кнопку с data-action и соответствующую запись в object actions — никаких новых обработчиков, никаких цепочек if/else.

Подводные камни и типичные ошибки

Делегирование — мощная техника, но у неё есть острые углы. Помните об этом:

Не все события всплывают. focus, blur, mouseenter и mouseleave не всплывают, поэтому делегирование не перехватит их на родительском элементе. Используйте вместо них всплывающие аналоги: focusin/focusout для фокуса и mouseover/mouseout для наведения (с фильтрацией по event.target).
event.target и event.currentTarget. target — это элемент, на котором возникло событие; currentTarget (и this в обычной функции) — элемент, к которому присоединён обработчик. Путаница между ними — самая распространённая ошибка при делегировании.
Стрелочные функции и this. Стрелочная функция не имеет собственного this, поэтому this не будет контейнером. Если вы пишете обработчик как стрелочную функцию, используйте event.currentTarget.
Остановленное всплытие. Если дочерний обработчик вызывает event.stopPropagation(), событие никогда не достигнет вашего делегированного обработчика. Избегайте stopPropagation(), если это не действительно необходимо.
Слишком широкие контейнеры. Если вы привязываете обработчик к document для всего подряд, каждый клик запускает ваш обработчик. Ограничивайте обработчик наименьшим подходящим предком.

Когда использовать (и когда нет)

Ситуация	Делегирование?
Много похожих дочерних элементов (список, таблица, сетка)	Да — один обработчик для всех
Дочерние элементы добавляются/удаляются динамически	Да — не нужно перепривязывать обработчик
Один уникальный элемент	Нет — привяжите напрямую; так проще
Невсплывающие события (`focus`, `blur`)	Нет — используйте `focusin`/`focusout` или привяжите напрямую
Нужно вызвать `preventDefault()` как можно раньше	Часто допустимо, но привяжите напрямую для действий по умолчанию, которые нужно контролировать точно

Если вас интересуют события, которые вы создаёте сами, а не встроенные события браузера, см. раздел Отправка пользовательских событий.

Заключение

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

Практика

Какие типы событий JavaScript упоминаются на сайте w3docs?

Keyboard EventsTouch EventsMouse EventsScreen Events

Практика

Почему event.target.closest('.menu-item') надёжнее проверки event.target.tagName при делегировании?

Метод срабатывает даже при клике на вложенный элемент внутри пункта, например иконку или spanОн поднимается вверх по DOM и находит ближайшего подходящего предка кликнутого элементаОн присоединяет отдельный обработчик к каждому дочернему элементуОн работает только на том элементе, по которому кликнули напрямую

Практика

Какие события НЕ всплывают, то есть обычное делегирование на родителе их не перехватит?

focus и blurmouseenter и mouseleaveclickkeydown

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

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

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

Как это работает

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

Пример 1: обработка кликов по списку

Пример 2: управление кликами по кнопкам в динамическом интерфейсе

Более надёжный паттерн: использование closest()

Чтение данных с помощью атрибутов data-*

Подводные камни и типичные ошибки

Когда использовать (и когда нет)

Заключение

Практика

Более надёжный паттерн: использование `closest()`

Чтение данных с помощью атрибутов `data-*`