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

Назначение

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

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

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

Пример

const list=document.querySelector("[data-list]");
const output=document.querySelector("[data-output]");
if(list&&output){list.addEventListener("click",event=>{
if(!(event.target instanceof Element))return;
const button=event.target.closest("button[data-item]");
if(!button||!list.contains(button))return;
output.textContent=button.dataset.item;
});}

Что должно получиться

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

Граница применения и частая ошибка

Не предполагайте, что event.target всегда кнопка: пользователь может нажать на вложенную иконку. Также не все события всплывают одинаково, поэтому тип события имеет значение.

Самостоятельная проверка

Создайте список с кнопками data-item и вложенными span. Нажимайте на текст и иконку, затем добавьте новую кнопку после регистрации обработчика.

Связанные материалы

• Локальный HTTP-просмотр
• Просмотр изменений
• Проверка публикации