DOM и события

DOM — дерево объектов, которое браузер строит из HTML. JavaScript может находить узлы, менять их и подписываться на события.

const list = document.querySelector("#todo");
list.addEventListener("click", (e) => {
  const item = e.target.closest("li[data-id]");
  if (item) remove(item.dataset.id);       // делегирование
});

Что важно знать

• Событие идёт в три фазы: перехват сверху вниз, цель, всплытие снизу вверх. Обработчики по умолчанию — на всплытии.
• Делегирование: один обработчик на родителе вместо сотни на элементах — работает и для элементов, добавленных позже.
• e.target — где произошло событие, e.currentTarget — где висит обработчик.
• preventDefault() отменяет действие браузера, stopPropagation() — всплытие (злоупотреблять не стоит).
• Частые события (scroll, input, resize) — через debounce или throttle; пассивные обработчики прокрутки.
• Массовые изменения DOM — пачкой (DocumentFragment, replaceChildren), без чтения размеров между записями.
• textContent вместо innerHTML для пользовательских данных — защита от XSS.