Работа с событиями в JavaScript

Вы когда-нибудь задумывались, как сайт понимает, что вы кликнули по кнопке или навели мышь на картинку? Всё это благодаря событиям. События — это сигналы, которые браузер отправляет JavaScript-коду, чтобы сообщить о действиях пользователя. В этой статье мы разберем, как их ловить и обрабатывать. Это базовый навык, без которого не обойтись ни одному веб-разработчику.

Что такое события и зачем они нужны

Представьте, что ваш сайт — это дом. События — это звонки в дверь. Когда кто-то нажимает на кнопку или вводит текст, браузер "звонит" в ваш JavaScript-код. Вы можете решить, что делать: открыть дверь (выполнить действие) или проигнорировать. Без событий сайт был бы статичным, как картинка. События делают его интерактивным.

В JavaScript есть множество типов событий: клики, нажатия клавиш, загрузка страницы, отправка формы и десятки других. Каждое событие имеет имя, например, click, keydown, submit. Вы можете "подписаться" на событие, чтобы выполнить свой код, когда оно произойдет.

Как подписаться на событие: три способа

Есть три основных способа назначить обработчик события. Давайте разберем каждый.

Способ 1: Атрибут HTML

Самый простой, но не самый гибкий способ — добавить атрибут прямо в HTML. Например:

Нажми меня

Минус в том, что JavaScript смешивается с HTML. Это плохо для поддержки. Такой подход лучше не использовать в больших проектах.

Способ 2: Свойство DOM-элемента

Можно назначить обработчик через свойство элемента в JavaScript:

const button = document.querySelector('button');
button.onclick = function() {
  alert('Клик!');
};

Это уже лучше, но есть ограничение: на одно событие можно назначить только один обработчик. Если вы напишете button.onclick = ... два раза, второй перезапишет первый.

Способ 3: addEventListener

Самый правильный и мощный способ — использовать метод addEventListener:

const button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Клик!');
});

Этот метод позволяет добавлять сколько угодно обработчиков на одно событие. Также вы можете удалить обработчик с помощью removeEventListener. Это даёт гибкость и контроль.

Объект события: что внутри

Когда происходит событие, браузер передаёт обработчику объект события. Этот объект содержит информацию о событии: какой элемент вызвал событие, координаты мыши, нажатую клавишу и многое другое. Обычно его называют event или e.

button.addEventListener('click', function(event) {
  console.log(event); // Выведет объект события
  console.log('Тип события:', event.type); // 'click'
  console.log('Целевой элемент:', event.target); // Кнопка
});

Объект события полезен, когда нужно узнать детали. Например, при нажатии клавиши вы можете проверить, какая именно клавиша была нажата:

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('Нажат Enter');
  }
});

Всплытие и погружение событий

Это одна из самых важных концепций. Когда вы кликаете по элементу, событие не останавливается на нём. Оно "всплывает" вверх по DOM-дереву: от дочернего элемента к родительскому, и так до самого document. Этот процесс называется всплытием. Есть также обратный процесс — погружение (capture), когда событие идёт сверху вниз.

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

parent.addEventListener('click', function() {
  console.log('Родитель (погружение)');
}, true); // true — фаза погружения

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

document.querySelector('ul').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Клик по элементу списка:', event.target.textContent);
  }
});

Это экономит память и упрощает код.

Отмена действий по умолчанию

Некоторые события имеют действия по умолчанию. Например, клик по ссылке переводит на другую страницу, отправка формы перезагружает страницу. Иногда это нужно отменить. Для этого используется метод preventDefault():

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault(); // Отменяем переход
  console.log('Ссылка не сработала');
});

Также можно остановить всплытие с помощью stopPropagation(). Это полезно, когда вы не хотите, чтобы событие дошло до родительских элементов:

child.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Только дочерний элемент');
});

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

Что в итоге

События — это сердце интерактивности в вебе. Вы узнали, что такое события, как их назначать через addEventListener, как работать с объектом события, как работает всплытие, и как отменять стандартные действия. Теперь вы можете делать сайты живыми и отзывчивыми. Практикуйтесь: попробуйте написать простую страницу с кнопками и формами, используя полученные знания. Удачи!