Вы уже умеете пользоваться стандартными событиями вроде клика или нажатия клавиши. Но что, если нужно, чтобы ваш код реагировал на что-то своё? Например, на завершение загрузки данных или на изменение состояния игры. Тут на помощь приходят кастомные события. В этой статье разберём, как их создавать и обрабатывать, с примерами на JavaScript и PHP.

Digital-студия WNDER

Что такое кастомные события и зачем они нужны

Представьте, что вы играете в настольную игру. Есть стандартные действия: бросок кубика, ход фишкой. Но вы можете придумать своё правило: например, «если выпало шесть, игрок получает дополнительный ход». Это и есть кастомное событие — вы определяете его сами и сами решаете, когда оно должно сработать.

В программировании кастомные события позволяют развязать компоненты системы. Один модуль генерирует событие, другие на него подписываются и реагируют. Это делает код гибким и расширяемым.

Кастомные события в JavaScript

В JavaScript есть встроенный конструктор CustomEvent. С его помощью можно создать событие с любыми данными и отправить его на элементе.

Пример: создадим событие userLogin, которое будет содержать имя пользователя.

// Создаём событие
const event = new CustomEvent('userLogin', {
  detail: { username: 'Alice' }
});

// Отправляем событие на документе
document.dispatchEvent(event);

// Подписываемся на событие
document.addEventListener('userLogin', (e) => {
  console.log('Пользователь вошёл:', e.detail.username);
});

Обратите внимание на свойство detail — в нём можно передать любые данные. Это удобно для передачи информации о событии.

Правило: Всегда указывайте в detail только необходимые данные. Не передавайте весь объект состояния — это может привести к утечкам памяти и усложнить отладку.

Параметры CustomEvent

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

Параметр Описание По умолчанию
detail Любые данные, связанные с событием null
bubbles Всплывает ли событие вверх по DOM false
cancelable Можно ли отменить действие по умолчанию false
composed Проникает ли событие через границы shadow DOM false

Эти параметры помогают управлять поведением события. Например, если установить bubbles: true, событие будет всплывать от дочерних элементов к родительским, как обычные клики.

Обработка кастомных событий в PHP

В PHP нет встроенной системы событий, как в JavaScript. Но можно реализовать простой диспетчер событий с помощью паттерна «Наблюдатель». Создадим класс EventDispatcher, который позволяет подписываться на события и вызывать их.

<?php
class EventDispatcher {
    private $listeners = [];

    public function addListener(string $eventName, callable $listener): void {
        $this->listeners[$eventName][] = $listener;
    }

    public function dispatch(string $eventName, array $data = []): void {
        if (isset($this->listeners[$eventName])) {
            foreach ($this->listeners[$eventName] as $listener) {
                $listener($data);
            }
        }
    }
}

// Использование
$dispatcher = new EventDispatcher();
$dispatcher->addListener('user.registered', function($data) {
    echo "Новый пользователь: {$data['username']}\n";
});

$dispatcher->dispatch('user.registered', ['username' => 'Bob']);

Такой подход позволяет легко добавлять новых слушателей без изменения основного кода. Это особенно полезно в больших приложениях.

Лайфхак: Используйте пространства имён для событий, например user.registered или order.completed. Так вы избежите конфликтов и упростите поиск обработчиков.

Практические советы и типичные ошибки

Вот несколько рекомендаций, которые помогут избежать проблем:

  • Не создавайте слишком много кастомных событий — это усложняет отслеживание связей.
  • Всегда документируйте, какие данные передаются в detail.
  • В JavaScript используйте bubbles: true осторожно, чтобы не вызвать неожиданных срабатываний.
  • В PHP избегайте циклических зависимостей между слушателями.

Ещё одна частая ошибка — забыть удалить слушателя после использования. В JavaScript это может привести к утечкам памяти. Используйте removeEventListener или AbortController для очистки.

Что в итоге

Кастомные события — мощный инструмент для создания гибкой архитектуры. В JavaScript они встроены и просты в использовании, в PHP их можно реализовать через паттерн «Наблюдатель». Главное — не злоупотреблять и чётко документировать передаваемые данные. Попробуйте применить их в своём следующем проекте, и вы увидите, насколько чище станет код.

Студия WNDER