Событие change

Природа события change в контексте AutoNumeric и DOM

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

Ключевая характеристика события заключается в том, что оно фиксирует не каждый промежуточный ввод, а итоговое состояние значения после завершения редактирования. В типичном сценарии событие инициируется при потере фокуса элементом (blur), если текущее значение отличается от значения на момент получения фокуса.

Механизм срабатывания change

В стандартной модели браузера событие change срабатывает при выполнении двух условий:

  • элемент <input> теряет фокус;
  • текущее значение отличается от исходного значения, зафиксированного при фокусировке.

При использовании AutoNumeric внутренняя логика усложняется, поскольку отображаемое значение (formatted value) и фактическое числовое значение (raw value) могут различаться.

AutoNumeric постоянно синхронизирует:

  • отображаемое значение (например, 1 234,56 €);
  • внутреннее числовое значение (например, 1234.56).

Из-за этого событие change может отражать изменение, которое неочевидно визуально, но присутствует на уровне raw-данных.

Влияние форматирования на change

AutoNumeric перехватывает ввод и преобразует его в форматированное представление. При этом событие change срабатывает на DOM-уровне уже после завершения всех внутренних преобразований.

Особенности поведения:

  • визуальное значение может измениться без изменения raw-значения;
  • raw-значение может измениться без очевидного визуального изменения (например, нормализация нулей);
  • событие фиксирует итоговое состояние после форматирования.

Пример состояния:

<input id="price" value="1 000,00">

После взаимодействия:

  • пользователь вводит 1000.5
  • AutoNumeric отображает 1 000,50
  • при потере фокуса срабатывает change

Различие между input и change

Взаимодействие с AutoNumeric особенно чувствительно к различию между событиями input и change.

input

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

change

  • вызывается после завершения редактирования;
  • фиксирует финальное значение;
  • учитывает результат форматирования AutoNumeric.

В контексте AutoNumeric цепочка обработки выглядит следующим образом:

  1. ввод символа;
  2. внутреннее преобразование AutoNumeric;
  3. обновление formatted value;
  4. при потере фокуса — проверка изменения;
  5. генерация change.

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

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

Пример программного изменения:

const anElement = AutoNumeric.getAutoNumericElement("#price");

anElement.set(2500);

В этом случае возможны сценарии:

  • значение изменено без пользовательского ввода;
  • DOM-событие change может не инициироваться автоматически;
  • при необходимости имитации пользовательского изменения требуется явная диспетчеризация события.

Стандартный подход для эмуляции:

const input = document.querySelector("#price");

input.dispatchEvent(new Event("change", { bubbles: true }));

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

Сравнение rawValue и formatted value при change

AutoNumeric разделяет два уровня данных:

  • formatted value — строка отображения;
  • raw value — числовое представление.

При обработке change часто используется извлечение raw-значения:

const anElement = AutoNumeric.getAutoNumericElement("#price");

const value = anElement.getNumber();

Именно raw value является корректным источником данных для бизнес-логики, поскольку formatted value содержит локализацию, разделители и символы валют.

Событие change не передаёт raw-значение напрямую, поэтому требуется обращение к API экземпляра.

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

Нативное событие change содержит стандартную структуру:

  • event.target — input-элемент;
  • event.type — "change";
  • event.bubbles — true;
  • event.cancelable — false.

AutoNumeric не расширяет стандартный объект change, однако может находиться в связке с другими событиями библиотеки, такими как:

  • autoNumeric:formatted;
  • autoNumeric:rawValueModified;
  • autoNumeric:initialized.

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

Поведение при отсутствии изменения значения

Если значение не изменилось, событие change не генерируется. Это поведение сохраняется и при использовании AutoNumeric, несмотря на возможные промежуточные преобразования формата.

Пример:

  • поле содержит 1 000,00;
  • пользователь фокусирует поле и выходит без изменений;
  • событие change не срабатывает.

Даже если AutoNumeric выполняет внутреннюю нормализацию отображения, DOM-уровень фиксирует отсутствие изменения.

Взаимодействие с blur

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

  1. пользователь завершает ввод;
  2. элемент теряет фокус (blur);
  3. выполняется проверка изменения значения;
  4. при наличии изменений генерируется change.

AutoNumeric выполняет форматирование непосредственно перед этим этапом, что влияет на финальное сравнение значений.

Особенности работы с IME и мобильным вводом

При использовании методов ввода с композициями (IME, например для восточных языков) событие change может задерживаться до завершения композиции.

Поведение:

  • промежуточные символы не фиксируются как изменение;
  • AutoNumeric временно отключает форматирование;
  • change срабатывает только после завершения ввода.

На мобильных устройствах возможны дополнительные задержки, связанные с особенностями виртуальных клавиатур и системных событий blur.

change и маскированные значения

AutoNumeric активно применяет маскирование ввода, что влияет на восприятие изменения значения.

Пример маски:

  • ввод: 1234
  • отображение: 1 234,00

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

Сценарии интеграции с формами

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

С AutoNumeric типовой сценарий выглядит следующим образом:

document.querySelector("#price").addEventListener("change", (e) => {
  const anElement = AutoNumeric.getAutoNumericElement(e.target);
  const numericValue = anElement.getNumber();

  // дальнейшая обработка numericValue
});

В этом контексте событие выступает точкой фиксации данных перед отправкой формы или сохранением состояния.

Особенности поведения при уничтожении экземпляра AutoNumeric

При уничтожении инстанса:

anElement.remove();

или

AutoNumeric.remove("#price");

связь между форматированием и DOM-элементом разрывается. Однако нативное поведение change сохраняется за самим input-элементом, так как оно относится к браузерному API.

Конфликты с кастомными обработчиками

При наличии нескольких обработчиков события возможны конфликты:

  • обработчики input изменяют состояние до change;
  • change может использовать уже финализированное значение;
  • сторонние библиотеки могут вмешиваться в порядок событий.

AutoNumeric, как правило, завершает свою обработку до момента генерации change, обеспечивая консистентное состояние input.

Итоговая модель поведения

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

Оглавление