События и обработчики
Тема дорожной карты · Frontend разработчик
События JavaScript — это сигналы, инициируемые браузером при наступлении чего-либо: пользователь нажимает кнопку, отправляет форму, нажимает клавишу, изменяет размер окна или завершается сетевой запрос, — позволяя JavaScript реагировать и обновлять интерфейс. Frontend-разработчики прикрепляют обработчики событий через addEventListener(тип, обработчик, опции) на DOM-элементах, где объект options управляет тем, срабатывает ли слушатель в фазе перехвата или всплытия, и является ли он passive (важно для производительности скролла и Core Web Vitals). Система событий DOM распространяет события через три фазы: перехват (от корня к цели), цель и всплытие (от цели обратно к корню) — этот механизм используется делегированием событий: один обработчик прикрепляется к родительскому элементу для эффективной обработки событий от многих дочерних элементов. Глубокое понимание событий JavaScript — включая event.preventDefault(), event.stopPropagation(), CustomEvent, EventTarget и pointer/touch-события для мобильных — фундаментально для построения доступных высокопроизводительных интерактивных интерфейсов на React, чистом JavaScript и TypeScript.
Как это работает
События и обработчики — однопоточный event-driven язык с first-class функциями, прототипным наследованием и динамической типизацией. Переменные: let, const (block-scope), избегайте var. Типы: number, string, boolean, null, undefined, symbol, bigint, object. Равенство: === (строгое) лучше == (коэрсит). Поток: if/else, for/for...of/for...in, while, switch. Асинхронность: callback → promise → async/await. DOM API (document, Element, Event) для чтения + изменения страницы.
Когда применять
Освойте ванильный JS до фреймворка — каждый React/Vue/Svelte баг в итоге оказывается JS-багом. const по умолчанию, let только при реассайне. async/await лучше сырых promise-цепочек. Array.map/filter/reduce лучше ручных циклов, когда intent ясен. Линтинг — ESLint + разумный config (Standard, Airbnb, recommended). Современные фичи (optional chaining ?., nullish coalescing ??).
Типичные ошибки
Ловушки События и обработчики: путаница this в callback (arrow-функции наследуют this; обычные создают своё); баги == (0 == "" истина); мутация массива, когда хотели копию (arr.sort() мутирует — используйте [...arr].sort()); забытый await и работа с Promise (не получаете значение); console.log объекта показывает живое состояние (меняется после лога). Используйте TypeScript, чтобы ловить это на сборке.