Пространства имен событий

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

Основы пространства имен

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

$('.button').on('click.menu', function() {
    console.log('Меню открыто');
});

click — стандартный тип события.
menu — имя пространства.

Имя пространства помогает группировать обработчики. Один и тот же элемент может иметь несколько обработчиков одного типа, но с разными пространствами имен:

$('.button').on('click.menu', handleMenu);
$('.button').on('click.tooltip', handleTooltip);

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

Удаление обработчиков по пространству имени

Пространства имен особенно полезны при удалении событий. Можно удалить конкретный обработчик, указав его пространство:

$('.button').off('click.menu');

Будет удалён только обработчик из пространства menu.
Обработчик из пространства tooltip останется.

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

$('.button').off('.tooltip');

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

Комбинирование нескольких пространств

Один обработчик может быть зарегистрирован сразу в нескольких пространствах:

$('.button').on('click.menu.tooltip', function() {
    console.log('Событие для меню и подсказки');
});

Такой обработчик можно удалить, указав любое из пространств:

$('.button').off('.menu'); // Удаляется, потому что обработчик связан с пространством menu

Практические сценарии использования

Модульность кода Пространства имен позволяют разделять обработчики по функциональным блокам. Например, события меню, модальных окон и подсказок можно регистрировать с разными пространствами, чтобы управление было точечным.
Избежание конфликтов Если разные части приложения добавляют обработчики на один и тот же элемент, пространства имен предотвращают случайное удаление чужих обработчиков.
Упрощённая очистка событий При удалении динамически создаваемых компонентов достаточно удалить все события, относящиеся к конкретному пространству, без перебора каждого типа события.

function initTooltip() {
    $('.tooltip-trigger').on('mouseenter.tooltip', showTooltip);
    $('.tooltip-trigger').on('mouseleave.tooltip', hideTooltip);
}

function destroyTooltip() {
    $('.tooltip-trigger').off('.tooltip'); // удаляет все события tooltip
}

Ограничения и особенности

Пространство имени не может быть пустой строкой; оно должно следовать за точкой.
Можно использовать только буквы, цифры и подчеркивания для имени пространства.
Пространства имен не поддерживаются нативными DOM-обработчиками, они реализованы самой библиотекой Cash. При прямой работе с addEventListener они не работают.

Работа с делегированными событиями

Cash поддерживает делегирование через .on(), и пространства имен полностью совместимы с этим:

$(document).on('click.menu', '.dropdown-item', function() {
    console.log('Выбран пункт меню');
});

Пространство имени menu позволяет при необходимости удалить все делегированные обработчики для меню одним вызовом:

$(document).off('.menu');