Событие change

Библиотека Choices.js реализует кастомизированную работу с <select> и <input> элементами, заменяя стандартное поведение нативных контролов расширенным API. Одним из ключевых механизмов взаимодействия с состоянием компонента выступает событие change, фиксирующее изменение выбранных значений.

Поведение события change

Событие change возникает при изменении текущего значения компонента выбора. Под изменением понимаются следующие действия:

  • выбор нового элемента из списка;
  • удаление ранее выбранного значения (в режиме множественного выбора);
  • очистка текущего выбора;
  • программное изменение значения через API библиотеки;
  • вставка пользовательского значения (если включён режим создания новых опций).

Событие отражает актуальное состояние выбранных данных после завершения операции изменения.

Источники возникновения события

Внутри Choices.js событие change может быть инициировано несколькими механизмами:

  1. Пользовательское взаимодействие

    • выбор пункта из выпадающего списка;
    • клик по уже выбранному тегу для удаления;
    • ввод кастомного значения (в режиме addItems).

  2. Программный API

    • setChoiceByValue();
    • setValue();
    • removeActiveItems();
    • clearStore().

  3. Внутренние обновления состояния

    • синхронизация UI и store после фильтрации;
    • обновление при инициализации компонента.

Подписка на событие change

Событие change связано с DOM-элементом, который был преобразован библиотекой. Подписка осуществляется через стандартный механизм событий DOM.

const element = document.querySelector('#select');

const choices = new Choices(element);

element.addEventListener('change', (event) => {
  console.log(event.target.value);
});

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

Формат данных события

Содержимое event.target.value зависит от режима работы:

Одиночный выбор

{
  value: "2"
}

Значение строки или числа соответствует выбранной опции.

Множественный выбор

{
  value: "2,5,8"
}

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

Отличие от нативного change

В стандартном HTML событие change срабатывает при потере фокуса или подтверждении выбора. В Choices.js поведение модифицируется:

  • событие вызывается немедленно после изменения состояния;
  • обновление UI и store происходит синхронно;
  • учитываются кастомные элементы и виртуальные списки;
  • добавляется поддержка тегов и созданных пользователем значений.

Таким образом, change становится отражением внутреннего состояния компонента, а не только DOM-значения.

Программные изменения и генерация change

При изменении значения через API библиотека синхронизирует состояние и инициирует событие change.

choices.setChoiceByValue('3');

После выполнения:

  • обновляется store;
  • пересчитывается UI;
  • генерируется change.

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

Множественный выбор и change

В режиме removeItem и addItem событие change становится особенно важным, так как отражает каждое изменение состава выбранных элементов.

Пример поведения:

const choices = new Choices('#select', {
  removeItemButton: true,
  maxItemCount: 5
});

choices.setValue([{ value: '1' }, { value: '2' }]);

Каждое добавление или удаление приводит к последовательным вызовам change, фиксируя актуальное состояние списка.

Делегирование и отслеживание изменений

Внутренне библиотека синхронизирует изменения через слой abstraction над DOM. Поэтому событие может использоваться как единая точка контроля состояния:

  • обновление внешних компонентов интерфейса;
  • синхронизация с сервером;
  • реакция на пользовательские действия без прямого доступа к store.

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

При включении режима создания новых элементов (addItems: true) событие change фиксирует добавление пользовательских значений.

const choices = new Choices('#select', {
  addItems: true,
  duplicateItemsAllowed: false
});

При вводе нового значения:

  • создаётся новая опция;
  • значение добавляется в store;
  • вызывается change.

Взаимодействие с фильтрацией и поиском

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

Фильтрация списка не всегда вызывает событие, однако подтверждение выбора после фильтрации приводит к его генерации.

Особенности повторных вызовов

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

  • добавление нескольких значений;
  • массовое обновление через API;
  • восстановление состояния из JSON;

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

Синхронизация с внешними системами

Событие change часто используется как точка интеграции:

  • обновление состояния формы;
  • синхронизация с state-менеджерами;
  • отправка данных на сервер;
  • реакция на пользовательские сценарии выбора.

Поведение остаётся детерминированным: каждое изменение store приводит к актуализации DOM и генерации события.

Оглавление