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

Umbrella JS предоставляет простой и мощный способ работы с пользовательскими событиями в браузере, обеспечивая удобный синтаксис для их создания, привязки и обработки. Пользовательские события позволяют разработчику определять свои собственные события помимо стандартных DOM-событий, таких как click или input. Это особенно полезно для модульной архитектуры приложений и компонентов, где необходимо сигнализировать о внутренних изменениях или действиях.

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

Для генерации собственного события используется конструктор CustomEvent. Он позволяет задать имя события и объект с дополнительными данными (detail), которые будут доступны обработчикам:

let event = new CustomEvent('myEvent', {
    detail: {
        message: 'Данные события',
        time: new Date()
    },
    bubbles: true,
    cancelable: true
});
  • detail — объект с пользовательскими данными, доступный через event.detail.
  • bubbles — определяет, будет ли событие всплывать по дереву DOM.
  • cancelable — указывает, можно ли отменить стандартное действие при обработке события.

Привязка обработчиков

Umbrella JS предоставляет метод .on() для привязки обработчиков как к стандартным, так и к пользовательским событиям:

u('#button').on('myEvent', function(e) {
    console.log('Событие вызвано:', e.detail.message);
});

Особенности привязки пользовательских событий в Umbrella JS:

  • Обработчики получают объект события Event, расширенный данными из detail.
  • Можно привязывать несколько обработчиков к одному событию на разных элементах одновременно.
  • Поддерживаются цепочки вызовов благодаря возвращению коллекции элементов.

Вызов пользовательских событий

Для вызова события применяется метод .trigger():

u('#button').trigger('myEvent', {
    message: 'Переданные данные при вызове',
    time: new Date()
});

Метод .trigger() автоматически создаёт CustomEvent и передаёт объект данных в detail. Если необходимо, событие можно заставить всплывать или быть отменяемым:

u('#button').trigger('myEvent', {
    message: 'Событие с всплытием',
    bubbles: true,
    cancelable: true
});

Удаление обработчиков

Метод .off() позволяет удалить ранее привязанные обработчики пользовательских событий:

function handleEvent(e) {
    console.log('Обработчик события');
}

u('#button').on('myEvent', handleEvent);

// позже
u('#button').off('myEvent', handleEvent);
  • Если обработчик не указан, .off('myEvent') удаляет все обработчики указанного события для выбранных элементов.
  • Полностью отключить все события можно, вызвав .off() без параметров.

Всплытие и делегирование

Поскольку пользовательские события в Umbrella JS могут всплывать, становится возможным делегирование:

u('#container').on('myEvent', 'button', function(e) {
    console.log('Событие с делегированием от кнопки', e.target);
});
  • Первый аргумент метода .on() — имя события.
  • Второй аргумент — селектор дочерних элементов для делегирования.
  • В обработчике e.target указывает на реальный элемент, на котором произошло событие.

Практическое применение

  1. Модульные компоненты: компоненты могут оповещать другие части приложения о своих внутренних действиях без жесткой связи через DOM.
  2. Кастомные интерактивные элементы: создание пользовательских событий при изменении состояния, например, при переключении вкладок или открытии модального окна.
  3. Асинхронные уведомления: события позволяют уведомлять другие части приложения после завершения AJAX-запросов или анимаций.

Советы по использованию

  • Для унификации имен событий рекомендуется использовать префиксы: modal:open, tabs:change.
  • Всегда проверять e.detail перед использованием данных, чтобы избежать ошибок при пустом объекте.
  • Пользовательские события удобно комбинировать с цепочкой .on().trigger() для компактного кода.

Пользовательские события в Umbrella JS обеспечивают гибкую модель взаимодействия между элементами и компонентами, позволяя создавать модульный, легко поддерживаемый и масштабируемый код.

Оглавление