2. Обработка событий

---

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

Основы addEventListener

Метод addEventListener регистрирует обработчик для указанного события на элементе.

element.addEventListener(event, handler, [options]);

• event — строка с названием события (например, 'click', 'submit').
• handler — функция, которая будет вызвана при наступлении события.
• options — необязательный объект или булево значение (см. ниже).

const button = document.getElementById('myButton');

function handleClick() {
    alert('Кнопка нажата!');
}

button.addEventListener('click', handleClick);

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

Если обработчик больше не нужен, его можно удалить методом removeEventListener. При этом передаётся та же самая функция (не анонимная).

button.removeEventListener('click', handleClick);

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

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

element.addEventListener('click', function(event) {
    console.log(event); // Объект MouseEvent для клика
});

Основные свойства и методы объекта event:

• event.type — тип события (например, 'click').
• event.target — элемент, на котором произошло событие (может быть дочерним).
• event.currentTarget — элемент, на котором сработал обработчик (обычно тот, к которому привязан слушатель).
• event.preventDefault() — отменяет действие по умолчанию (например, переход по ссылке или отправку формы).
• event.stopPropagation() — предотвращает всплытие события (останавливает его распространение по DOM).
• event.stopImmediatePropagation() — предотвращает всплытие и вызов других обработчиков на том же элементе.

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

Фазы события: всплытие и перехват

События в DOM проходят три фазы:

• Фаза перехвата (capturing) — событие идёт от window вниз к целевому элементу.
• Фаза цели (target) — событие достигло целевого элемента.
• Фаза всплытия (bubbling) — событие поднимается от целевого элемента вверх к window.

По умолчанию обработчики срабатывают на фазе всплытия. Чтобы повесить обработчик на фазу перехвата, нужно передать true или { capture: true } в третьем аргументе.

// Фаза всплытия (по умолчанию)
parent.addEventListener('click', () => console.log('parent (bubble)'));
child.addEventListener('click', () => console.log('child (bubble)'));

// Фаза перехвата
parent.addEventListener('click', () => console.log('parent (capture)'), true);
child.addEventListener('click', () => console.log('child (capture)'), true);

// При клике на child порядок:
// parent (capture) -> child (capture) -> child (bubble) -> parent (bubble)

Опции addEventListener

Третий аргумент может быть объектом с полями:

• capture: true — обработчик сработает на фазе перехвата (аналог true).
• once: true — обработчик вызовется только один раз, затем автоматически удалится.
• passive: true — указывает, что обработчик не вызовет preventDefault(). Это улучшает производительность при скролле.

// Обработчик сработает только один раз
button.addEventListener('click', () => {
    console.log('Это сообщение появится только один раз');
}, { once: true });

// Пассивный обработчик для событий прокрутки (не блокирует скролл)
window.addEventListener('touchstart', () => {
    // не вызываем preventDefault
}, { passive: true });

Популярные типы событий

События мыши

• click — клик (нажатие и отпускание).
• dblclick — двойной клик.
• mousedown / mouseup — нажатие / отпускание кнопки мыши.
• mousemove — движение мыши.
• mouseover / mouseout — наведение на элемент / уход с элемента (всплывают).
• mouseenter / mouseleave — наведение / уход (не всплывают, более удобны для попапов).

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

• keydown — нажатие клавиши.
• keyup — отпускание клавиши.
• keypress — устаревшее, используйте keydown.

В объекте события клавиатуры доступны event.key (строка с символом), event.code (физический код клавиши) и флаги ctrlKey, shiftKey, altKey.

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        console.log('Нажали ESC');
    }
});

События полей ввода

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

События форм

• submit — отправка формы. Важно вызвать event.preventDefault() для отмены отправки.

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    // Валидация или отправка через fetch
});

События документа/окна

• DOMContentLoaded — HTML загружен и построен DOM (не ждёт картинки и стили).
• load — страница полностью загружена (включая ресурсы).
• resize — изменение размера окна.
• scroll — прокрутка.

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM готов! Можно искать элементы.');
});