События

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

О событиях в веб-аналитике и ивент-маркетинге см. статью Event (Событие).

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

Модель событий

В основе работы с событиями лежит концепция, что каждый HTML-элемент может «слушать» происходящие с ним события и реагировать на них с помощью специальных функций - обработчиков событий.

Браузер постоянно находится в состоянии ожидания и реагирует на действия пользователя. Когда происходит какое-либо действие, браузер создаёт объект события, содержащий информацию о произошедшем: тип события, элемент, на котором оно произошло, координаты курсора и другие данные.

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

События классифицируются по типу взаимодействия.

События мыши

• click - клик левой кнопкой мыши.
• dblclick - двойной клик.
• mouseover - курсор мыши наведён на элемент.
• mouseout - курсор мыши покинул элемент.
• mousedown - кнопка мыши нажата (но ещё не отпущена).
• mouseup - кнопка мыши отпущена.
• mousemove - движение курсора над элементом.
• contextmenu - вызов контекстного меню (клик правой кнопкой мыши).

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

• keydown - клавиша нажата (срабатывает первой).
• keypress - клавиша нажата и удерживается (срабатывает после keydown).
• keyup - клавиша отпущена.

События элементов форм

• submit - отправка формы.
• change - изменение значения поля (для input, select, textarea).
• input - ввод данных в поле (срабатывает на каждое изменение).
• focus - получение фокуса элементом.
• blur - потеря фокуса элементом.
• reset - сброс формы.

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

• load - полная загрузка страницы со всеми ресурсами.
• DOMContentLoaded - загрузка HTML-документа завершена, но внешние ресурсы (изображения, стили) ещё могут загружаться.
• resize - изменение размера окна браузера.
• scroll - прокрутка страницы.
• unload - уход со страницы (закрытие вкладки, переход по ссылке).

Назначение обработчиков

Существует несколько способов назначить функцию-обработчик на событие.

HTML-атрибуты

Обработчик задаётся непосредственно в HTML-коде с помощью атрибутов, начинающихся с "on".

<button onclick="alert('Клик!')">Нажми меня</button>

Этот способ считается устаревшим, так как смешивает JavaScript и HTML.

Свойства DOM-элементов

Обработчик назначается через свойство элемента.

let button = document.getElementById('myButton');
button.onclick = function() {
    alert('Клик!');
};

Недостаток - можно назначить только 1 обработчик на событие.

addEventListener()

Современный и рекомендуемый способ. Позволяет назначать несколько обработчиков на одно событие и имеет дополнительные возможности.

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

Синтаксис: element.addEventListener(событие, обработчик, фаза).

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

При возникновении события браузер создаёт объект события, который автоматически передаётся в обработчик. Этот объект содержит детальную информацию о событии.

element.addEventListener('click', function(event) {
    console.log(event.type);       // тип события
    console.log(event.target);     // элемент, на котором произошло событие
    console.log(event.clientX);    // координаты курсора по X
    console.log(event.clientY);    // координаты курсора по Y
});

Основные свойства объекта события:

• type - тип события.
• target - элемент, на котором произошло событие.
• currentTarget - элемент, к которому привязан обработчик.
• clientX / clientY - координаты курсора относительно окна браузера.
• keyCode - код нажатой клавиши (для клавиатурных событий).
• preventDefault() - отменяет действие браузера по умолчанию.
• stopPropagation() - прекращает всплытие события.

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

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

• Погружение (capturing) - событие идёт от корня вниз к целевому элементу.
• Всплытие (bubbling) - событие идёт от целевого элемента вверх к корню.

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

Делегирование событий

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

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

Это особенно полезно для динамически добавляемых элементов и оптимизации производительности.

События в маркетинге

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

• Отслеживания действий пользователей в системах веб-аналитики (Яндекс Метрика, Google Analytics 4).
• Создания интерактивных элементов (калькуляторы, таймеры, попапы).
• Валидации форм перед отправкой.
• Реализации бесконечной прокрутки и подгрузки контента.
• A/B-тестирования элементов интерфейса.

Связанные термины

• JavaScript
• DOM
• Обработчик событий
• Всплытие событий
• Делегирование событий
• addEventListener
• Event (Событие)