5.01. События

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

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

События

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

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

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

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

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

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

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

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

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

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 — данные, переданные в кастомном событии

События​

События