Перейти к основному содержимому

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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ
Разработчику Архитектору

События​

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

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

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

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

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

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

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

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

image-10.png

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

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

<элемент>.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();
});
Освоение главы0%