Что такое event delegation и зачем его использовать?

Question

Accepted Answer

**Event delegation** означает присоединение **одного** обработчика к общему предку вместо одного обработчика на каждого потомка и использование **event bubbling** для определения того, с каким потомком была произведена взаимодействие (через `event.target`). ```js // ❌ without delegation: one listener PER item (and broken for new items) document.querySelectorAll("li").forEach(li => li.addEventListener("click", handle)); // ✅ with delegation: ONE listener on the parent document.querySelector("ul").addEventListener("click", e => { const li = e.target.closest("li"); // find the clicked item if (li) select(li.dataset.id); }); ``` ## Как это работает Когда вы нажимаете на `

`, событие **всплывает**: `li → ul → body → document`. Обработчик на `

`, а `e.target` указывает вам точный элемент, на который был выполнен клик. `closest("li")` движется вверх от цели, чтобы найти нужный элемент (также обрабатывает клики на внутренних элементах). ## Почему это важно - **Производительность/память**: один обработчик вместо сотен или тысяч. - **Автоматически работает для динамически добавленных элементов** — новый `
`, добавленный позже, не требует нового обработчика, потому что родитель уже его обрабатывает. - **Простая очистка**: удалите один обработчик, а не много. ## Оговорка Это зависит от всплытия, поэтому не работает для событий, которые **не всплывают** (`focus`, `blur` — используйте `focusin`/`focusout` вместо этого). Это ровно та техника, которую React использует внутри (один корневой обработчик для всего приложения).

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

Почему это важно

Оговорка