Полный список событий

В Slim Select взаимодействие с состоянием компонента построено вокруг событийного API. Экземпляр селекта предоставляет механизм подписки на изменения, позволяя реагировать на действия пользователя и внутренние изменения состояния без вмешательства в DOM-логику.

Основная модель работы основана на регистрации обработчиков через метод on(event, handler) и управлении подписками через off(event, handler) или сброс всех слушателей при необходимости.

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

Инициализация обработчиков событий

После создания экземпляра Slim Select доступен объект управления, через который регистрируются события:

const select = new SlimSelect({
  select: '#mySelect'
});

select.on('change', (info) => {
  console.log(info);
});

Обработчики получают объект состояния, структура которого зависит от типа события. В большинстве случаев это либо текущее значение, либо расширенная информация о выбранных элементах.

Удаление обработчика выполняется через:

function handler(data) {
  console.log(data);
}

select.on('change', handler);

// позже
select.off('change', handler);

События изменения выбора

change

Событие change является центральным в работе Slim Select. Оно вызывается при любом изменении выбранного значения.

select.on('change', (data) => {
  console.log('Текущее значение:', data);
});

Особенности:

  • срабатывает при выборе нового значения
  • срабатывает при удалении выбранного значения
  • возвращает актуальное состояние селекта

select / deselect (логический уровень)

В некоторых конфигурациях Slim Select поведение может быть разбито на более детализированные события:

  • select — выбор элемента
  • deselect — снятие выбора
select.on('select', (item) => {
  console.log('Выбран:', item);
});

select.on('deselect', (item) => {
  console.log('Снято:', item);
});

Каждое событие передаёт объект элемента, содержащий идентификатор, текст и дополнительные поля, если они были заданы в исходных данных.

События открытия и закрытия выпадающего списка

Компонент предоставляет события жизненного цикла dropdown-меню.

beforeOpen

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

select.on('beforeOpen', () => {
  console.log('Перед открытием списка');
});

afterOpen

Срабатывает после того, как список стал видимым.

select.on('afterOpen', () => {
  console.log('Список открыт');
});

beforeClose

Событие перед закрытием выпадающего списка.

select.on('beforeClose', () => {
  console.log('Перед закрытием');
});

afterClose

Фиксирует момент завершения закрытия интерфейса.

select.on('afterClose', () => {
  console.log('Список закрыт');
});

События поиска

Slim Select поддерживает встроенную фильтрацию списка, и этот процесс также сопровождается событиями.

Событие search вызывается при вводе текста в поле поиска внутри dropdown.

select.on('search', (query) => {
  console.log('Поисковый запрос:', query);
});

Использование:

  • логирование пользовательского ввода
  • динамическая подгрузка данных
  • внешняя фильтрация списка

При асинхронной работе событие может использоваться как триггер запроса к API.

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

В сложных сценариях Slim Select может работать с динамическими списками. При обновлении данных важно отслеживать состояние компонента.

Типовые ситуации:

  • программное изменение значения через API
  • обновление списка опций
  • сброс состояния
select.setData([
  { text: 'Option 1', value: '1' },
  { text: 'Option 2', value: '2' }
]);

select.on('change', (data) => {
  console.log('Обновлённое значение:', data);
});

Изменения, вызванные программно, также могут генерировать change, что важно учитывать при построении реактивной логики.

Управление подписками и жизненный цикл обработчиков

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

Рекомендуемые подходы:

  • удаление обработчиков при уничтожении компонента
  • избежание дублирующей регистрации
  • использование именованных функций вместо анонимных
function onChange(data) {
  console.log(data);
}

select.on('change', onChange);

// очистка при необходимости
select.off('change', onChange);

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

События в динамических интерфейсах

При интеграции Slim Select в SPA-архитектуры события становятся основным способом синхронизации состояния UI и бизнес-логики.

Типовой сценарий:

  • открытие списка инициирует загрузку данных
  • поиск фильтрует серверный результат
  • выбор элемента обновляет глобальное состояние
  • закрытие фиксирует итоговый выбор
select.on('afterOpen', async () => {
  const res = await fetch('/api/options');
  const data = await res.json();

  select.setData(data);
});

Особенности порядка срабатывания событий

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

  1. beforeOpen
  2. открытие UI
  3. afterOpen
  4. search (при вводе)
  5. change (при выборе)
  6. beforeClose
  7. закрытие UI
  8. afterClose

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

Событийная модель и программное управление

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

Пример защиты от зацикливания:

let internalUpdate = false;

select.on('change', (data) => {
  if (internalUpdate) return;

  console.log('Пользователь изменил значение', data);
});

internalUpdate = true;
select.set('value', '2');
internalUpdate = false;
Оглавление