Урок 41 из 114 · 6 мин

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

Один обработчик на контейнер, event.target.closest, data-атрибуты и динамические элементы.

Тридцать кнопок

У каждого товара кнопка. И новые товары добавляются потом. На каждую вешать обработчик?
Бро
Нет: события всплывают. Повесь один обработчик на список, а в нём смотри, какая кнопка нажата.

Понятие

Делегирование

Что это: Обработчик на родителе ловит всплывшие события детей; event.target.closest("button") находит нужную кнопку.
Зачем: Меньше кода и работает для новых элементов.
Как: JavaScript
document.querySelector("ul").addEventListener("click", (e) => { const btn = e.target.closest("button"); if (!btn) return; console.log("Добавлен:", btn.dataset.item); }); document.querySelectorAll("button")[1].click();
Так это работает

Ваш ход

Задание

Повесь один обработчик click на #menu: при клике по кнопке добавляй её data-item в массив cart.

const cart = [];

const cart = [];

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Главное преимущество делегирования?

Домашнее заданиеДля закрепления

Выберите один ответ.

На чём основано делегирование?