DOM события: простое объяснение и быстрый старт

Если вы когда‑нибудь писали интерактивный сайт, вы уже встречали слово «событие». В браузере всё — клик, ввод текста, прокрутка — это события, которые генерирует DOM (Document Object Model). Они позволяют реагировать на действия пользователей без перезагрузки страницы.

Самый базовый способ «слушать» событие – это добавить обработчик через addEventListener. Вы указываете элемент, тип события (например, click) и функцию, которая выполнится, когда событие произойдёт.

Как правильно привязывать обработчики

Самая частая ошибка новичков – писать обработчики прямо в HTML, например <button onclick="myFunc()">. Такой подход работает, но быстро превращает разметку в кашу и мешает поддержке кода. Лучше держать логику в JavaScript‑файле.

Пример правильного подключения:

const button = document.querySelector('#myBtn');
button.addEventListener('click', function(event) {
    console.log('Кнопка нажата');
});

Обратите внимание, что event передаётся автоматически. Через него можно узнать, какой элемент инициировал событие, какие клавиши нажаты и т.д.

Типы часто используемых событий

Вот список самых популярных событий и когда их стоит применять:

• click – клик мышью или тачскрин; подходит для кнопок, ссылок.
• submit – отправка формы; позволяет проверять данные перед отправкой.
• input – изменение значения в поле ввода; отлично для автодополнения.
• change – изменение значения после потери фокуса; часто используется с выпадающими списками.
• scroll – прокрутка страницы; полезно для lazy‑load изображений.

Каждое событие имеет свою «всплывающую» (bubbling) и «капающую» (capturing) фазу. По‑умолчанию обработчики работают в фазе всплытия, но иногда удобно перехватить событие раньше – тогда в addEventListener добавьте третий параметр true.

Пример перехвата в фазе захвата:

document.addEventListener('click', handler, true);

Это особенно полезно, когда нужно остановить дальнейшее распространение события. Для этого в функции‑обработчике вызывают event.stopPropagation() или event.preventDefault(), если хотите отменить действие браузера (например, переход по ссылке).

Не забывайте про делегирование. Вместо того чтобы вешать обработчики на каждый элемент списка, можно навесить один обработчик на родительский элемент и проверять, откуда пришло событие через event.target. Это экономит память и упрощает динамический контент.

document.querySelector('#list').addEventListener('click', function(e) {
    if (e.target.matches('li')) {
        console.log('Элемент листа:', e.target.textContent);
    }
});

Наконец, стоит помнить о производительности. События типа scroll или resize вызываются очень часто, поэтому в обработчике стоит использовать throttle или debounce, чтобы не перегрузить главный поток.

Подытожим: DOM‑события – это фундамент для интерактивных сайтов. Правильное их использование делает код чистым, быстрым и удобным в поддержке. Применяйте addEventListener, разделяйте логику и разметку, используйте делегирование и не забывайте о фазах и оптимизации. С этими простыми правилами любой новичок сможет быстро сделать страницу живой и отзывчивой.