К какой таске относится addEventListener

addEventListener: Область применения в современной разработке

Основное назначение

addEventListener — это метод для подписки на события DOM-элементов. Он относится к категории управления событиями в браузере и является фундаментальным инструментом во фронтенд-разработке.

Где используется

1. Vanilla JavaScript (чистый JS без фреймворков)

В классических проектах без React, Vue или Angular — это основной способ работать с событиями:

// Клик по кнопке
const button = document.getElementById("submit");
button.addEventListener("click", (e) => {
  console.log("Кнопка нажата");
});

// Отправка формы
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  // обработка данных
});

// Изменение поля ввода
const input = document.getElementById("name");
input.addEventListener("change", (e) => {
  console.log("Значение:", e.target.value);
});

2. В React и современных фреймворках

В React используется синтетическая система событий, но иногда нужен addEventListener:

// Слушаем событие на окне
useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener("resize", handleResize);
  
  return () => window.removeEventListener("resize", handleResize); // cleanup
}, []);

// Работа с нефокусируемыми элементами
const ref = useRef(null);
useEffect(() => {
  const handleKeyDown = (e) => {
    if (e.key === "Escape") {
      // закрыть модал
    }
  };
  ref.current?.addEventListener("keydown", handleKeyDown);
  return () => ref.current?.removeEventListener("keydown", handleKeyDown);
}, []);

Типичные задачи

Обработка пользовательских действий

• click — клики по кнопкам и ссылкам
• input/change — изменение в текстовых полях
• submit — отправка форм
• focus/blur — фокусировка на элементах

Навигация и жизненный цикл

• scroll — прокрутка страницы
• load/unload — загрузка и выгрузка страницы
• beforeunload — предупреждение перед закрытием

Клавиатура и мышь

• keydown/keyup — нажатие клавиш
• mousemove/mouseenter — движение мышки
• touchstart/touchend — касание на мобильных

Взаимодействие с окном

• resize — изменение размера окна
• orientationchange — поворот экрана
• online/offline — соединение с интернетом

Правильное использование

Добавление слушателя

// Хорошо: с именованной функцией (легче удалять)
function handleClick(e) {
  console.log("Клик");
}
element.addEventListener("click", handleClick);

// Плохо: анонимная функция (невозможно удалить)
element.addEventListener("click", () => console.log("Клик"));

Удаление слушателя

// Правильно: используй ту же функцию
const handler = () => console.log("Event");
element.addEventListener("click", handler);
element.removeEventListener("click", handler); // работает!

// Неправильно: разные функции
element.addEventListener("click", () => {});
element.removeEventListener("click", () => {}); // не работает!

Использование опций

// once: слушатель сработает только один раз
element.addEventListener("click", handler, { once: true });

// capture: слушатель срабатывает на фазе захвата
element.addEventListener("click", handler, { capture: true });

// passive: оптимизирует производительность скролла
window.addEventListener("scroll", handler, { passive: true });

Альтернативы

Встроенные атрибуты (не рекомендуется)

<button onclick="handleClick()">Клик</button> <!-- XSS уязвимость -->

Через jQuery (устарело)

$(element).on("click", handler); // legacy подход

Через фреймворки (современный подход)

// React - синтетические события
<button onClick={handleClick}>Клик</button>

// Vue
<button @click="handleClick">Клик</button>

Потенциальные проблемы

Утечки памяти

Если не удалять слушателей, они накапливаются в памяти:

// Плохо: утечка памяти
function createElement() {
  const el = document.createElement("div");
  el.addEventListener("click", handler);
  document.body.appendChild(el);
  // слушатель остаётся в памяти после удаления элемента
}

// Хорошо: чистка
function createElement() {
  const el = document.createElement("div");
  const handler = () => {};
  el.addEventListener("click", handler);
  document.body.appendChild(el);
  el.addEventListener("remove", () => {
    el.removeEventListener("click", handler);
  });
}

Производительность

// Плохо: много слушателей на разных элементах
for (let i = 0; i < 1000; i++) {
  document.getElementById(`item-${i}`).addEventListener("click", handler);
}

// Хорошо: делегирование событий
container.addEventListener("click", (e) => {
  if (e.target.classList.contains("item")) {
    handler();
  }
});

Вывод

addEventListener относится к категории DOM-обработки событий и используется для:

• Ванильного JS без фреймворков
• Работы с глобальными событиями (resize, scroll)
• Сложной логики в React/Vue (useEffect + cleanup)
• Делегирования событий для оптимизации
• Работы с нестандартными событиями и опциями

Это основной инструмент взаимодействия с пользователем в браузере.