События и обработка событий в браузере

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

События

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

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

Все события в JavaScript происходят в контексте DOM (Document Object Model) и передаются через объект Event, который содержит информацию о типе события, его состоянии и дополнительных данных.

---

Встроенные события

Существует множество встроенных событий, которые можно использовать:

1. События мыши:
   • click — клик мышью
   • mouseover / mouseout — наведение/уход курсора
   • mousedown / mouseup — нажатие/отпускание кнопки мыши
2. Клавиатурные события:
   • keydown — нажата клавиша
   • keyup — клавиша отпущена
3. Формы:
   • submit — отправка формы
   • focus / blur — фокус на элементе / потеря фокуса
   • change — изменение значения элемента формы
4. UI-события:
   • resize — изменение размера окна
   • scroll — прокрутка страницы

Вот более полный список основных событий:

Имя события	Значение события	Применяется к элементам
click	Щелчок мышью или нажатие клавиши Enter при фокусе	Кнопки, ссылки, изображения, любые интерактивные элементы
dblclick	Двойной щелчок мышью	Кнопки, ссылки, текстовые области, изображения
mousedown	Нажатие любой кнопки мыши	Любые DOM-элементы
mouseup	Отпускание кнопки мыши	Любые DOM-элементы
mouseover	Перемещение курсора над элементом	Любые DOM-элементы
mouseout	Перемещение курсора за пределы элемента	Любые DOM-элементы
mousemove	Перемещение курсора внутри элемента	Любые DOM-элементы
mouseenter	Перемещение курсора внутрь элемента (не всплывает)	Любые DOM-элементы
mouseleave	Перемещение курсора из элемента (не всплывает)	Любые DOM-элементы
keydown	Нажатие клавиши на клавиатуре	Элементы с фокусом, окно документа
keyup	Отпускание клавиши на клавиатуре	Элементы с фокусом, окно документа
keypress	Нажатие клавиши для ввода символа (устаревшее)	Элементы с фокусом, окна ввода текста
focus	Получение фокуса элементом	Поля ввода, кнопки, ссылки
blur	Потеря фокуса элементом	Поля ввода, кнопки, ссылки
focusin	Фокус переходит внутрь элемента (всплывает)	Поля ввода, кнопки, ссылки
focusout	Фокус покидает элемент (всплывает)	Поля ввода, кнопки, ссылки
change	Изменение значения элемента формы	Поля ввода, выпадающие списки, чекбоксы
input	Мгновенное изменение значения поля ввода	Текстовые поля, поля поиска, contenteditable
submit	Отправка формы	Тег <form>
reset	Сброс формы	Тег <form>
resize	Изменение размера окна браузера	Окно браузера (window)
scroll	Прокрутка содержимого элемента или окна	Окно браузера, прокручиваемые блоки (div, body)
load	Загрузка ресурса (страницы, изображения)	Окно, изображения, скрипты, фреймы
unload	Закрытие страницы или переход на другую	Окно браузера
error	Ошибка загрузки ресурса	Окно, изображения, скрипты, фреймы
abort	Прерывание загрузки (например, отмена)	Элементы, поддерживающие AJAX или загрузку файлов
contextmenu	Открытие контекстного меню (правая кнопка мыши)	Любые DOM-элементы
wheel	Прокрутка колесиком мыши	Любые DOM-элементы
copy	Копирование выделенного текста	Любой активный элемент
cut	Вырезание выделенного текста	Любой активный элемент
paste	Вставка скопированного текста	Любой активный элемент

---

Пользовательские события

JavaScript позволяет создавать пользовательские события с помощью конструктора CustomEvent:

const myEvent = new CustomEvent('myCustomEvent', {
  detail: {
    message: 'Привет! Это событие!',
    userId: 1001
  }
});

---

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

Чтобы работать с событиями, нужно понять их жизненный цикл:

• Создание события — создаётся объект события.
• Инициация события — событие отправляется (dispatch).
• Прослушивание события — другой код ожидает его и реагирует.

Отправка события:

window.dispatchEvent(myEvent);

window используется здесь как глобальный объект, но события можно отправлять и на конкретные DOM-элементы.

Чтобы реагировать на событие, нужно добавить обработчик события с помощью метода addEventListener().

window.addEventListener('myCustomEvent', (event) => {
  console.log("Получено событие:", event.type);
  const { message, userId } = event.detail;
  console.log(`Сообщение: ${message}, Пользователь ID: ${userId}`);
});

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

Вы можете привязывать обработчики не только к window, но и к любым DOM-элементам:

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

button.addEventListener('click', () => {
  console.log('Кнопка нажата!');
});

Также можно отправлять кастомные события именно на элементы:

const customClick = new CustomEvent('customClick', {
  detail: { info: 'Это наш собственный клик' }
});

button.dispatchEvent(customClick);

Методы:

• addEventListener(type, handler) — добавляет обработчик
• removeEventListener(type, handler) — удаляет обработчик
• dispatchEvent(event) — отправляет событие

Свойства объекта event:

• type — тип события
• target — элемент, на котором произошло событие
• currentTarget — элемент, на котором сработал обработчик
• detail — данные, переданные в кастомном событии

---

Алгоритмические шаблоны

Регистрация обработчика события

<элемент>.addEventListener("<тип_события>", <обработчик>);

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

<элемент>.removeEventListener("<тип_события>", <обработчик>);

Создание пользовательского события

const <имя_события> = new CustomEvent("<тип_события>", {
  detail: <данные>
});

Отправка события

<элемент>.dispatchEvent(<имя_события>);

Обработчик события с доступом к данным

<элемент>.addEventListener("<тип_события>", (event) => {
  const данные = event.detail;
  // работа с данными
});

Доступ к свойствам события внутри обработчика

event.type        // строка с типом события
event.target      // элемент, на котором произошло событие
event.currentTarget // элемент, на котором установлен обработчик
event.detail      // данные, переданные через CustomEvent

Привязка обработчика к конкретному DOM-элементу

const элемент = document.querySelector("<селектор>");
элемент.addEventListener("<тип_события>", <обработчик>);

Использование анонимной функции как обработчика

<элемент>.addEventListener("<тип_события>", (event) => {
  // реакция на событие
});

Использование именованной функции как обработчика

function <имя_функции>(event) {
  // реакция на событие
}

<элемент>.addEventListener("<тип_события>", <имя_функции>);

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

<элемент>.addEventListener("<тип_события>", (event) => {
  event.preventDefault();
});

Остановка всплытия события

<элемент>.addEventListener("<тип_события>", (event) => {
  event.stopPropagation();
});

---

Методы объектов событий

Методы используются для управления поведением события, его распространением и выполнением действий по умолчанию.

Основные методы объекта Event

Метод	Описание
event.preventDefault()	Отменяет стандартное действие браузера для события. Например, предотвращает переход по ссылке при клике или отправку формы.
event.stopPropagation()	Останавливает дальнейшее всплытие события по цепочке родительских элементов. Обработчики на родителях больше не сработают.
event.stopImmediatePropagation()	Останавливает всплытие события и предотвращает выполнение других обработчиков, добавленных на тот же элемент для этого же типа события.
event.initEvent(type, bubbles, cancelable)	Инициализирует событие программно (устаревший метод, используется редко).
event.isTrusted	Возвращает true, если событие вызвано пользователем (клик, ввод), и false, если создано скриптом.

Методы работы с обработчиками (на объектах DOM)

Эти методы вызываются непосредственно на элементах DOM или глобальных объектах.

Метод	Описание
element.addEventListener(type, handler, options)	Добавляет новый обработчик события. Принимает тип события, функцию-обработчик и опциональные параметры (флаг capture, once).
element.removeEventListener(type, handler, options)	Удаляет ранее добавленный обработчик события. Требуется указать ту же функцию-ссылку, что и при добавлении.
element.dispatchEvent(event)	Создает и запускает событие на конкретном элементе. Используется для ручного инициирования событий (в том числе пользовательских).
element.click()	Синтетический метод, вызывающий событие click как если бы пользователь нажал кнопку.
element.focus()	Устанавливает фокус на элемент, вызывая события focus и focusin.
element.blur()	Снимает фокус с элемента, вызывая события blur и focusout.

---

Свойства объекта события

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

Базовые свойства

Свойство	Тип данных	Описание
type	Строка	Название типа события (например, "click", "keydown").
target	Объект DOM	Исходный элемент, на котором произошло событие.
currentTarget	Объект DOM	Элемент, на котором в данный момент установлен обработчик события.
eventPhase	Число	Текущая фаза обработки события: 1 (захват), 2 (всплытие), 3 (завершение/обработка на целевом элементе).
bubbles	Булево	Указывает, всплывает ли событие вверх по DOM-дереву.
cancelable	Булево	Указывает, можно ли отменить действие события с помощью preventDefault().
defaultPrevented	Булево	true, если было вызвано preventDefault().
isTrusted	Булево	true, если событие сгенерировано браузером напрямую пользователем; false — если создано скриптом.
timeStamp	Число	Время возникновения события в миллисекундах с момента загрузки страницы.

Специфические свойства для типов событий

Свойства событий мыши

Свойство	Описание
clientX, clientY	Координаты курсора относительно видимой области окна браузера.
screenX, screenY	Координаты курсора относительно всего экрана монитора.
pageX, pageY	Координаты курсора относительно всей страницы (учитывает прокрутку).
button	Номер нажатой кнопки мыши (0 — левая, 1 — средняя, 2 — правая).
buttons	Битовая маска состояния всех нажатых кнопок мыши во время движения.
movementX, movementY	Смещение курсора относительно предыдущего события движения.

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

Свойство	Описание
key	Значение нажатой клавиши (строка, например, "a", "Enter", "Shift").
code	Физическое расположение клавиши на клавиатуре (например, "KeyA", "Space").
ctrlKey, shiftKey, altKey, metaKey	Статус соответствующих модификаторов (нажата ли клавиша Ctrl, Shift и т.д.).
repeat	true, если событие генерируется при удержании клавиши.
location	Расположение клавиши на клавиатуре (0 — основная зона, 1 — Numpad, 2 — Meta/AltGr).

Свойства событий формы

Свойство	Описание
inputType	Тип ввода (для событий input), описывающий источник изменения (например, "insertText", "deleteContentBackward").
dataTransfer	Объект для передачи данных при перетаскивании (drag and drop).

Свойства пользовательских событий (CustomEvent)

Свойство	Описание
detail	Произвольный объект или данные, переданные при создании события через конструктор new CustomEvent().

---

Дополнительные примеры использования свойств

Пример доступа к координатам мыши

document.addEventListener('mousemove', (event) => {
  console.log(`Позиция X: ${event.clientX}, Y: ${event.clientY}`);
  console.log(`Координаты на странице: ${event.pageX}, ${event.pageY}`);
});

Пример проверки модификаторов клавиш

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // Отменяем стандартное сохранение браузера
    console.log('Выполняется кастомное сохранение...');
    // Логика сохранения
  }
});

Пример работы с данными в пользовательском событии

// Создание события с данными
const loginEvent = new CustomEvent('userLogin', {
  detail: {
    username: 'admin',
    timestamp: Date.now(),
    role: 'superuser'
  }
});

// Обработка события
document.addEventListener('userLogin', (event) => {
  const { username, role } = event.detail;
  console.log(`Пользователь ${username} вошел в систему с ролью ${role}`);
  
  // Доступ к другим свойствам
  console.log(`Время события: ${event.timeStamp}`);
  console.log(`Доверено событие: ${event.isTrusted}`);
});

// Отправка события
document.dispatchEvent(loginEvent);

Пример разницы между target и currentTarget

<div id="parent">
  <button id="child">Нажми меня</button>
</div>

<script>
const parent = document.getElementById('parent');

parent.addEventListener('click', (event) => {
  console.log('Целевой элемент (target):', event.target.id); // child
  console.log('Элемент обработчика (currentTarget):', event.currentTarget.id); // parent
});
</script>

В данном примере при клике на кнопку id="child":

• event.target указывает на саму кнопку, так как клик произошел именно там.
• event.currentTarget указывает на элемент parent, где установлен обработчик события.

---