Что такое обработчики событий (event listeners) и как ими пользоваться?

Question

Accepted Answer

## Идея

**Event listener** — колбэк на `EventTarget` (элемент, `document`, `window`), который вызывается при событии: клик, ввод, сеть, кастомные события.

```js
document.getElementById("myButton").addEventListener("click", () => {
  alert("Button was clicked!");
});
```

---

## `addEventListener` и опции

```js
el.addEventListener("scroll", onScroll, {
  capture: false,  // фаза погружения
  once: true,      // один раз
  passive: true,   // не вызывать preventDefault (важно для scroll/touch)
  signal: controller.signal, // снять через AbortController
});
```

Снятие: тот же `removeEventListener` с **той же** функцией-ссылкой, либо `AbortController.abort()`.

---

## Практика

- Долгоживущие слушатели снимайте, когда фича уничтожена (утечки / «зомби»-хендлеры).
- Много однотипных детей → **делегирование** на родителе.
- Не анонимные функции, если планируете `removeEventListener`.

**Итог:** слушатель связывает событие и реакцию; владение lifecycle и делегирование — часть зрелого ответа.