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

Dom7 — это лёгкая библиотека для работы с DOM, используемая в основном вместе с фреймворком Framework7, но при этом полностью самостоятельная и удобная для управления элементами на странице. Одной из ключевых возможностей является работа с кастомными событиями, что позволяет создавать гибкие и масштабируемые интерфейсы без привязки к стандартным событиям браузера.

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

Кастомные события позволяют передавать информацию между компонентами или элементами DOM. В Dom7 для этого используются методы .trigger() и .on().

Пример создания и вызова кастомного события:

import Dom7 from 'dom7';

const $button = Dom7('.my-button');

$button.on('myCustomEvent', function (event, data) {
    console.log('Кастомное событие вызвано', data);
});

$button.trigger('myCustomEvent', { id: 123, name: 'example' });

В этом примере происходит следующее:

  • Создаётся обработчик на кастомное событие myCustomEvent.
  • Через метод .trigger() событие вызывается с передачей дополнительных данных в виде объекта.

Ключевой момент: данные передаются вторым аргументом в trigger() и доступны в обработчике после объекта события.

Делегирование кастомных событий

Dom7 поддерживает делегирование событий через передачу селектора вторым аргументом в .on(). Это особенно удобно при динамическом добавлении элементов на страницу.

const $container = Dom7('.container');

$container.on('myCustomEvent', '.dynamic-item', function (event, data) {
    console.log('Событие на динамическом элементе', data);
});

Dom7('.container').append('<div class="dynamic-item">Элемент</div>');

Dom7('.dynamic-item').trigger('myCustomEvent', { value: 42 });

В данном примере обработчик установлен на родительский контейнер, но реагирует только на элементы с классом .dynamic-item. Это обеспечивает экономию ресурсов и позволяет работать с элементами, которых ещё нет в DOM в момент регистрации обработчика.

Передача данных в обработчики

Dom7 позволяет передавать несколько аргументов при вызове кастомного события:

const $element = Dom7('#element');

$element.on('update', function (event, arg1, arg2) {
    console.log(arg1, arg2);
});

$element.trigger('update', ['data1', { key: 'value' }]);

При этом каждый аргумент передаётся в обработчик в том порядке, в котором он был указан в trigger().

Удаление обработчиков кастомных событий

Для удаления обработчиков используется метод .off(). Он позволяет как полностью снять обработчик с элемента, так и удалить конкретный обработчик по имени события или селектору.

const $element = Dom7('#element');

function handler(event, data) {
    console.log('Обработчик сработал', data);
}

$element.on('myEvent', handler);
$element.off('myEvent', handler);

Если необходимо удалить все обработчики для события, достаточно вызвать .off('myEvent'). Для делегированных событий также можно указать селектор.

Встроенные события и совместимость с кастомными

Dom7 полностью совместим с нативными событиями браузера. Это значит, что можно комбинировать кастомные и стандартные события:

const $button = Dom7('.button');

$button.on('click myCustomEvent', function (event) {
    console.log('Событие произошло', event.type);
});

Метод .trigger() подходит только для кастомных событий, но при желании можно инициировать нативные события через стандартный API dispatchEvent.

Использование once для одноразовых обработчиков

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

const $element = Dom7('#element');

$element.once('singleEvent', function (event, data) {
    console.log('Обработчик сработал один раз', data);
});

$element.trigger('singleEvent', { value: 1 });
$element.trigger('singleEvent', { value: 2 }); // Игнорируется

Это полезно для инициализации или одноразовой реакции на событие.

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

  1. Компоненты интерфейса: передача состояния между кнопками, модальными окнами и вкладками.
  2. Динамическая подгрузка данных: уведомление других элементов о завершении AJAX-запроса.
  3. Системы уведомлений: централизованное оповещение разных частей страницы без прямой зависимости между ними.
  4. Интеграция с внешними библиотеками: создание унифицированного API событий для сторонних плагинов.

Кастомные события в Dom7 — это универсальный инструмент, позволяющий строить сложные интерактивные приложения, поддерживая чистую и модульную архитектуру. Правильное использование .on(), .trigger(), .off() и .once() обеспечивает гибкость, масштабируемость и контроль над потоком событий в приложении.

Оглавление