Объект события

Общая модель передачи событий

В Slim Select обработка событий строится вокруг колбэков, которые получают не «чистый» DOM Event, а расширенный объект состояния. Он объединяет информацию из нативного события браузера, текущее состояние компонента и данные выбранных элементов.

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

Ключевая особенность заключается в том, что Slim Select не ограничивается стандартной моделью event.target. Вместо этого формируется структурированный объект, в котором содержится текущее состояние инстанса и данные выбора.

Базовая структура объекта события

В типичном обработчике Slim Select объект события содержит несколько устойчивых компонентов:

  • value — текущее значение или массив значений выбранных опций
  • data — массив объектов опций, соответствующих выбранным значениям
  • select — ссылка на оригинальный DOM-элемент <select>
  • slim — экземпляр Slim Select, связанный с данным элементом
  • event — нативное DOM-событие (если оно было источником изменения)

Дополнительно могут присутствовать поля, зависящие от конкретного типа события:

  • search — строка поиска внутри выпадающего списка
  • added / removed — изменения при множественном выборе
  • before / after state — состояние до и после изменения (в некоторых реализациях)

Нативное событие и его роль

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

В таких случаях он сохраняется в поле:

  • event.originalEvent
  • либо напрямую как event

Нативное событие содержит стандартные свойства DOM:

  • type — тип события (change, click и т.д.)
  • target — элемент, инициировавший событие
  • timeStamp — время возникновения события
  • bubbles, cancelable — поведение события в DOM

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

Объект slim и состояние инстанса

Одним из ключевых элементов объекта события является ссылка на экземпляр Slim Select:

  • slim — объект, через который можно получить доступ к текущей конфигурации и состоянию

Через него доступны:

  • текущие выбранные значения
  • список всех опций
  • методы управления (открытие, закрытие, обновление)
  • конфигурационные параметры

Пример логической структуры:

{
  value: ["1", "3"],
  data: [
    { text: "Option 1", value: "1" },
    { text: "Option 3", value: "3" }
  ],
  slim: SlimSelectInstance
}

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

Объект data и нормализация опций

Поле data содержит нормализованное представление выбранных опций. Slim Select преобразует <option> элементы в унифицированную структуру:

  • text — отображаемый текст
  • value — значение
  • selected — состояние выбора
  • дополнительные пользовательские атрибуты (если включены)

Это важно, потому что исходный DOM <option> может содержать произвольные атрибуты, но Slim Select приводит их к предсказуемому виду.

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

Различия поведения в single и multiple режимах

Структура объекта события зависит от режима работы компонента.

Single select

{
  value: "2",
  data: { text: "Option 2", value: "2" }
}

Здесь data — одиночный объект, а value — строка или число.

Multiple select

{
  value: ["2", "5"],
  data: [
    { text: "Option 2", value: "2" },
    { text: "Option 5", value: "5" }
  ]
}

Здесь оба поля становятся массивами.

Объект события в обработчиках Slim Select

Slim Select использует событийную модель через конфигурационный объект:

new SlimSelect({
  select: '#example',
  events: {
    afterChange: (info) => {
      console.log(info.value);
      console.log(info.data);
    }
  }
});

Параметр info и есть объект события, который формируется библиотекой. Он не является стандартным Event, а представляет собой агрегированное состояние.

Дополнительные поля в расширенных сценариях

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

  • search — текущее значение строки поиска
  • placeholder — состояние placeholder при сбросе
  • disabled — состояние доступности select
  • action — тип действия (select, deselect, clear)
  • previousValue — предыдущее значение перед изменением

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

Изменяемость объекта события

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

  • он может быть не полностью иммутабельным
  • некоторые поля обновляются синхронно с UI
  • ссылки на slim всегда отражают актуальное состояние

Это означает, что сохранение объекта события «на потом» может приводить к несоответствию данных, если компонент был изменён после его генерации.

Взаимодействие с DOM и синтетические события

Хотя Slim Select формирует собственные объекты, он также синхронизирует состояние с оригинальным <select> элементом. Это приводит к тому, что:

  • значение value всегда соответствует DOM-состоянию
  • может инициироваться нативное событие change
  • сторонние скрипты могут реагировать на изменения без знания Slim Select

В таких случаях объект события Slim Select и DOM Event существуют параллельно, но используются для разных уровней логики.

Особенности обработки ошибок в объекте события

В стандартном объекте события Slim Select отсутствует явное поле ошибки, однако косвенные признаки могут появляться:

  • пустой data при наличии value
  • несоответствие между DOM и внутренним состоянием
  • null или undefined в slim при некорректной инициализации

Подобные ситуации обычно связаны с асинхронным обновлением или внешним изменением DOM без уведомления Slim Select.

Значение объекта события в архитектуре Slim Select

Объект события выступает связующим звеном между:

  • DOM-уровнем (select, option, change)
  • внутренним состоянием компонента
  • пользовательской логикой приложения

За счёт этого Slim Select минимизирует необходимость прямого взаимодействия с DOM и предоставляет единый слой данных, отражающий текущее состояние селектора в любой момент времени.

Оглавление