Что такое события, основные типы событий

1. Событие в JavaScript

Когда вы листаете страницу, кликаете на кнопку, набираете текст в поле ввода, наводите мышку на картинку — вы не просто «что-то делаете» на сайте. Вы вызываете события (events).

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

Если бы не события, веб-приложения были бы скучными и неинтерактивными: только открываешь страницу — и всё, дальше только смотреть, как на картину в музее. Но благодаря событиям сайт может реагировать на действия пользователя, словно официант, который мгновенно приносит кофе, когда вы только подумали о нём (жаль, что такое бывает только в JavaScript).

Пример из жизни:
Вы входите в комнату — срабатывает датчик движения, и загорается свет. В программировании этот «датчик» — обработчик события, а «движение» — событие, на которое он реагирует.

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

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

Классические примеры событий:

• Клик мышью по кнопке (click)
• Ввод текста в поле (input, change)
• Наведение мыши на элемент (mouseover, mouseenter)
• Уход мыши с элемента (mouseout, mouseleave)
• Нажатие клавиши на клавиатуре (keydown, keyup, keypress)
• Прокрутка страницы (scroll)
• Загрузка страницы (load)
• Отправка формы (submit)
• И многое другое!

JavaScript позволяет «подписываться» на эти события и запускать свой код в ответ на них.

Как работает событийная модель браузера

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

Когда пользователь, например, кликает на кнопку, браузер:

1. Генерирует объект события (event)
2. Ищет, есть ли обработчики (функции), которые подписались на это событие для данного элемента
3. Если обработчик есть — вызывает его, передавая объект события

Важный момент:
События могут происходить где угодно: на кнопке, на всём документе, на любом HTML-элементе. Можно реагировать на клик по конкретной кнопке, а можно — на клик по всему окну.

2. Основные типы событий

Давайте познакомимся с самыми популярными событиями, которые встречаются в 99% реальных проектов.

Событие "клик" (click)

Это, пожалуй, самое часто используемое событие. Оно возникает, когда пользователь щёлкает мышкой по элементу (например, по кнопке, ссылке, картинке).

Пример:
Пусть в нашем приложении есть кнопка:

<button id="myButton">Нажми меня!</button>

Добавим обработчик события на клик:

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Кнопка была нажата!');
});

Теперь при каждом клике по кнопке появится всплывающее окно.

Интересный факт:
Событие click срабатывает и при нажатии клавиши Enter, если элемент в фокусе (например, кнопка).

События ввода (input, change)

Эти события связаны с полями ввода (input, textarea, select).

• input — срабатывает при каждом изменении значения (на каждом вводе символа).
• change — срабатывает, когда элемент теряет фокус и его значение изменилось.

Пример:
Добавим поле ввода и будем выводить введённый текст в консоль:

<input type="text" id="nameInput" placeholder="Введите имя">

const input = document.getElementById('nameInput');
input.addEventListener('input', function(event) {
    console.log('Пользователь ввёл:', event.target.value);
});

Теперь каждый раз, когда пользователь вводит или стирает символ — мы это видим.

Различие между input и change:

• input — мгновенно реагирует на каждое изменение.
• change — только после того, как пользователь ушёл с поля (например, кликнул в другое место).

События наведения мыши (mouseover, mouseout, mouseenter, mouseleave)

Наведение мыши — это не только для навигации по меню, но и для создания красивых эффектов наведения, подсказок, выпадающих списков.

• mouseover — возникает, когда курсор заходит на элемент или на его дочерние элементы.
• mouseout — когда курсор покидает элемент или его дочерние элементы.
• mouseenter — только когда курсор заходит на сам элемент (не срабатывает при заходе на дочерние).
• mouseleave — только когда курсор покидает сам элемент.

Пример:
Пусть у нас есть блок, который подсвечивается при наведении:

<div id="hoverBlock" style="width: 200px; height: 100px; background: #eee; border: 1px solid #ccc;">
    Наведи на меня мышку!
</div>

const block = document.getElementById('hoverBlock');
block.addEventListener('mouseenter', function() {
    block.style.background = '#c2f0c2';
});
block.addEventListener('mouseleave', function() {
    block.style.background = '#eee';
});

Теперь блок будет зелёным при наведении и возвращаться к исходному цвету при уходе мыши.

Другие популярные события

• keydown, keyup, keypress — нажатие и отпускание клавиш на клавиатуре.
• submit — отправка формы.
• scroll — прокрутка страницы или элемента.
• load — страница или изображение полностью загрузились.

В этой лекции мы сфокусируемся на самых базовых: клик, ввод, наведение.

3. Как реагировать на события: обработчики событий

Чтобы «поймать» событие и что-то сделать в ответ, нужно назначить обработчик (функцию). Это как сказать: «Если кто-то нажмёт на эту кнопку — позвони мне».

Есть несколько способов добавить обработчик события:

Через HTML-атрибут (устаревший, но встречается)

<button onclick="alert('Привет!')">Нажми</button>

Этот способ не рекомендуется использовать в современных проектах, потому что он смешивает логику и разметку.

Через свойство элемента

button.onclick = function() {
    alert('Кнопка нажата!');
};

Минус: можно назначить только один обработчик (новое присваивание перезапишет старое).

Через addEventListener (современный и правильный способ)

button.addEventListener('click', function() {
    alert('Событие через addEventListener');
});

Преимущества:

• Можно назначать несколько обработчиков на одно событие.
• Можно легко удалить обработчик.
• Можно управлять порядком срабатывания.

4. Пример: делаем интерактивную кнопку

Давайте добавим в наше учебное приложение первую интерактивную фичу: кнопку, которая при каждом клике увеличивает счётчик.

HTML:

<button id="counterBtn">Нажми меня</button>
<span id="counterValue">0</span>

JS:

const btn = document.getElementById('counterBtn');
const counterSpan = document.getElementById('counterValue');
let count = 0;

btn.addEventListener('click', function() {
    count++;
    counterSpan.textContent = count;
});

Теперь каждый раз, когда пользователь кликает по кнопке, число рядом увеличивается. Вот он — первый шаг к настоящему приложению!

5. Типичные ошибки при работе с событиями

Ошибка №1: забыли выбрать элемент или выбрали несуществующий.
Если вы пытаетесь добавить обработчик к элементу, которого нет на странице (например, опечатались в id), получите ошибку: Cannot read property 'addEventListener' of null. Всегда проверяйте, что элемент реально существует!

Ошибка №2: обработчик не срабатывает, потому что событие не то.
Например, вы ждёте, что обработчик на change будет срабатывать при каждом вводе символа, а он срабатывает только при потере фокуса. Используйте событие input для мгновенного реагирования на ввод.

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

Ошибка №4: забыли снять обработчик (редко, но бывает).
Если вы динамически создаёте элементы и вешаете обработчики, не забывайте их удалять, иначе получите утечки памяти.

Ошибка №5: попытка изменить DOM без проверки.
Если в обработчике вы меняете содержимое элемента, который может быть удалён или ещё не создан, получите ошибку.