08. События и обработчики

Что такое событие

Событие — это любое действие пользователя на странице: клик мыши, ввод текста, прокрутка, нажатие клавиши и т.д.

Когда пользователь что-то делает на странице, браузер сообщает об этом JavaScript — и мы можем на это отреагировать.

Обработчики событий

Обработчик события — это функция, которая срабатывает, когда происходит определённое действие.

Пример: событие клика

let button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Кнопка нажата!');
});

Объяснение

• addEventListener() — метод, который «слушает» события.
• Первый параметр — тип события (например, `'click'`).
• Второй параметр — функция, которая выполнится при событии.

Типы событий

JavaScript может реагировать на десятки событий. Самые популярные:

• click — клик мыши
• dblclick — двойной клик
• mouseover / mouseout — наведение и уход мыши
• keydown / keyup — нажатие и отпускание клавиши
• input — изменение значения в поле ввода
• submit — отправка формы
• scroll — прокрутка страницы

Пример: наведение мыши

let box = document.querySelector('.box');
box.addEventListener('mouseover', () => {
  box.style.backgroundColor = 'lightgreen';
});
box.addEventListener('mouseout', () => {
  box.style.backgroundColor = 'lightblue';
});

Объект события

При срабатывании обработчика браузер передаёт специальный объект event — он содержит детали о событии.

let btn = document.querySelector('#infoBtn');
btn.addEventListener('click', (event) => {
  console.log('Тип события:', event.type);
  console.log('Координаты клика:', event.clientX, event.clientY);
});

Популярные свойства event

• type — тип события (например, 'click')
• target — элемент, на котором произошло событие
• clientX, clientY — координаты курсора
• key — клавиша, нажатая пользователем

События клавиатуры

document.addEventListener('keydown', (event) => {
  console.log('Вы нажали:', event.key);
});

Пример: реакция на клавишу Enter

let input = document.querySelector('input');
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    alert('Вы нажали Enter!');
  }
});

События форм

Пример: обработка ввода текста

let input = document.querySelector('#name');
input.addEventListener('input', () => {
  console.log('Пользователь ввёл:', input.value);
});

Пример: отправка формы

let form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // отменяем стандартную отправку формы
  alert('Форма отправлена!');
});

Удаление обработчика события

Иногда нужно перестать слушать событие. Это можно сделать через removeEventListener().

function greet() {
  alert('Привет!');
  button.removeEventListener('click', greet);
}
let button = document.querySelector('#onceBtn');
button.addEventListener('click', greet);

Теперь сообщение появится только при первом клике.

Мини-практика

• Создайте кнопку, которая меняет цвет фона при каждом клике.
• Сделайте поле ввода, которое считает количество введённых символов и показывает результат под ним.
• Реализуйте форму с кнопкой — при отправке выводите сообщение: «Здравствуйте, <имя>!».

Пример решения

let count = 0;
let btn = document.querySelector('#colorBtn');
btn.addEventListener('click', () => {
  let colors = ['lightblue', 'lightgreen', 'lightcoral', 'lightgoldenrodyellow'];
  document.body.style.backgroundColor = colors[count % colors.length];
  count++;
});

Советы новичкам

• Используйте addEventListener() вместо атрибутов вроде onclick — так код чище и удобнее поддерживать.
• Если что-то не работает — проверьте, существует ли элемент, прежде чем навешивать на него событие.
• Не забывайте вызывать preventDefault(), если хотите отменить стандартное поведение (например, при сабмите формы).
• Не добавляйте обработчики в цикле без нужды — это может замедлить работу сайта.

Итоги урока

Теперь вы знаете:

• Что такое события и как они работают в браузере.
• Как добавлять и удалять обработчики событий.
• Как работать с объектом event и его свойствами.
• Как обрабатывать клики, ввод текста, нажатие клавиш и отправку форм.