Триггеры событий

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

Регистрация событий

Для привязки обработчика используется метод .on(event, selector, handler):

$('.button').on('click', function(event) {
    console.log('Кнопка нажата');
});

Пояснения:

  • event — тип события, например 'click', 'mouseover', 'keydown'.
  • selector — необязательный параметр. Если указан, событие отслеживается для потомков соответствующего селектора.
  • handler — функция, вызываемая при срабатывании события.

Поддерживаются множественные события через пробел:

$('.input').on('focus blur', function() {
    console.log('Элемент в фокусе или потерял его');
});

Удаление событий

Метод .off(event, handler) позволяет снять обработчики с элементов:

function handleClick() {
    console.log('Нажатие обработано');
}

$('.button').on('click', handleClick);

// Позже снимаем обработчик
$('.button').off('click', handleClick);

Если не указывать handler, удаляются все обработчики указанного события.

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

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

$('#list').on('click', '.item', function() {
    console.log('Элемент списка кликнут');
});

Событие привязывается к родителю #list, но срабатывает только на потомках .item. Это уменьшает количество обработчиков и позволяет работать с элементами, добавленными после загрузки страницы.

Однократные обработчики

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

$('.button').one('click', function() {
    console.log('Сработает только один раз');
});

После первого вызова обработчик автоматически удаляется.

Программная генерация событий

Метод .trigger(event, data) используется для искусственного вызова событий:

$('.input').on('change', function(event, extra) {
    console.log('Изменено значение', extra);
});

$('.input').trigger('change', ['Дополнительные данные']);

data передается обработчику как дополнительные аргументы. Это полезно для имитации пользовательских действий или для синхронизации разных частей интерфейса.

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

Внутри обработчика this ссылается на DOM-элемент, на котором произошло событие. Для получения Cash-объекта можно использовать cash(this):

$('.button').on('click', function() {
    cash(this).addClass('active');
});

События на документах и окне

Cash позволяет работать с глобальными объектами, такими как document и window:

cash(document).on('keydown', function(event) {
    console.log('Нажата клавиша', event.key);
});

cash(window).on('resize', function() {
    console.log('Размер окна изменён');
});

Это расширяет возможности работы с событиями, выходя за рамки отдельных элементов.

Специальные события

Библиотека поддерживает нестандартные, синтетические события:

  • ready — срабатывает после полной загрузки DOM:
cash(document).on('ready', function() {
    console.log('DOM готов к работе');
});
  • Пользовательские события можно создавать через .trigger с любым именем.

Оптимизация и производительность

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

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

Это снижает нагрузку на браузер и предотвращает утечки памяти.

События с данными

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

$('.button').on('click', { role: 'admin' }, function(event) {
    console.log('Роль пользователя:', event.data.role);
});

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

Иерархия событий и их управление

Cash позволяет управлять приоритетом срабатывания через порядок подключения обработчиков. Также можно использовать методы event.stopPropagation() и event.preventDefault() для контроля всплытия и поведения браузера:

$('.link').on('click', function(event) {
    event.preventDefault();
    console.log('Ссылка не переходит по адресу');
});

Интеграция с анимацией и эффектами

События в Cash тесно связаны с анимацией и динамическими эффектами, что позволяет запускать действия при завершении анимации, наведении курсора, изменении состояния элементов:

$('.box').on('transitionend', function() {
    console.log('Анимация завершена');
});

Это делает библиотеку универсальным инструментом для интерактивного интерфейса.

Оглавление