Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на родителе ловит события детей через всплытие и определяет источник по event.target (или closest).
А ещё Не всплывают focus, blur, mouseenter — есть всплывающие focusin, focusout
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Фазы. addEventListener(type, fn, { capture: true }) вешает обработчик на фазу перехвата. Полезно, когда нужно перехватить событие раньше дочерних обработчиков.
Делегирование экономит обработчики (таблица на тысячу строк — один обработчик вместо тысячи) и автоматически покрывает динамически добавленные элементы. closest нужен, потому что клик мог прийти во вложенный элемент кнопки (иконку).
Опции addEventListener: once — снять после первого срабатывания; passive: true — обещание не вызывать preventDefault, позволяет браузеру прокручивать без задержки (важно для touch и wheel); signal — снять обработчик через AbortController.
Утечки: обработчики на долгоживущих элементах (window, document), не снятые при удалении компонента.
sottolist.addEventListener("click", (e) => {
const btn = e.target.closest("button[data-id]");
if (!btn || !list.contains(btn)) return;
removeItem(btn.dataset.id);
});
form.addEventListener("submit", (e) => {
e.preventDefault(); // не перезагружать страницу
send(new FormData(form));
});sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.