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

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

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

В Cash привязка событий осуществляется с помощью метода .on(). Для пользовательских событий синтаксис полностью аналогичен стандартным:

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

// Привязка пользовательского события 'customEvent'
$element.on('customEvent', function(event, data) {
    console.log('Пользовательское событие сработало', data);
});

event — объект события, автоматически передаваемый в обработчик.
data — дополнительные данные, которые можно передать при вызове события.

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

Для генерации пользовательских событий используется метод .trigger(). Он позволяет активировать любое событие на выбранных элементах:

$element.trigger('customEvent', { key: 'value' });

При этом обработчик, привязанный к событию customEvent, получит объект { key: 'value' } как второй аргумент.

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

Cash позволяет передавать произвольные данные при вызове события, что особенно удобно для передачи состояния или параметров:

$element.on('updateStatus', function(event, status) {
    console.log(`Статус обновлён: ${status}`);
});

$element.trigger('updateStatus', 'active');

В данном примере строка 'active' передаётся напрямую в обработчик, обеспечивая гибкость при работе с динамическими данными.

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

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

$('#parent').on('customClick', '.child', function(event) {
    console.log('Дочерний элемент был активирован');
});

Такой подход особенно эффективен при динамическом создании элементов, поскольку обработчики будут работать с элементами, добавленными в DOM после инициализации.

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

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

$element.off('customEvent'); // удаляет все обработчики 'customEvent'
$element.off();              // удаляет все события на элементе

Если был указан конкретный селектор при делегировании, .off() также поддерживает его:

$('#parent').off('customClick', '.child');

Особенности работы с контекстом `this`

В обработчиках событий, привязанных через Cash, this всегда ссылается на элемент, на котором произошло событие:

$element.on('customEvent', function() {
    console.log(this.id); // ID элемента, на котором сработало событие
});

Это упрощает работу с DOM без необходимости использовать внешние ссылки на элементы.

Встроенные методы для пользовательских событий

Cash предоставляет несколько полезных возможностей для управления пользовательскими событиями:

.one(event, handler) — привязывает обработчик так, чтобы он сработал только один раз.

$element.one('customEvent', function() {
    console.log('Сработало один раз');
});

.triggerHandler(event, data) — запускает событие только на первом элементе выборки и не инициирует всплытие. Используется для локальных событий, когда не требуется воздействие на родительские элементы.

const result = $element.triggerHandler('customEvent', { value: 42 });

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

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

$element.on('click customEvent', function(event) {
    if (event.type === 'click') {
        console.log('Клик по элементу');
    } else if (event.type === 'customEvent') {
        console.log('Пользовательское событие');
    }
});

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

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

Кастомные уведомления — события для внутренней коммуникации компонентов без глобальных переменных.
Динамическая валидация — запуск проверки формы при изменении определённых полей.
Анимации и переходы — уведомления о завершении анимаций для запуска последующих действий.
Модульная архитектура — события позволяют компонентам обмениваться данными независимо друг от друга.