Событие autoNumeric:rawValueModified

Событие autoNumeric:rawValueModified относится к внутреннему механизму библиотеки AutoNumeric и отражает момент изменения сырых числовых данных, которые лежат в основе отображаемого значения. В отличие от событий, связанных с визуальным представлением (форматированием числа в поле ввода), это событие фиксирует именно изменение «чистой» величины без учета локализации, разделителей тысяч, символов валюты и прочих форматирующих элементов.

Внутренняя модель AutoNumeric оперирует двумя параллельными представлениями значения:

  • formatted value — строка, отображаемая пользователю (например, 1 234,56 €)
  • raw value — числовое значение в «чистом» виде (например, 1234.56)

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

Событие autoNumeric:rawValueModified возникает в момент, когда изменяется именно это внутреннее числовое представление, независимо от того, как оно было изменено.

Момент возникновения события

Событие срабатывает в следующих ситуациях:

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

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

Отличие от других событий AutoNumeric

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

  • autoNumeric:formatted — изменение отображаемой строки
  • autoNumeric:rawValueModified — изменение числового значения
  • autoNumeric:initialized — завершение инициализации экземпляра
  • autoNumeric:destroyed — уничтожение экземпляра

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

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

Подписка через addEventListener

AutoNumeric использует нативную систему событий DOM, поэтому стандартный способ подписки выглядит следующим образом:

const input = document.querySelector('#price');
const anElement = AutoNumeric.getAutoNumericElement(input);

input.addEventListener('autoNumeric:rawValueModified', (event) => {
    const rawValue = anElement.getNumber();
    console.log('Изменённое значение:', rawValue);
});

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

Использование при инициализации AutoNumeric

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

const anElement = new AutoNumeric('#price', {
    decimalPlaces: 2
});

anElement.domElement.addEventListener('autoNumeric:rawValueModified', (e) => {
    const value = anElement.getNumber();
    console.log('RAW изменился:', value);
});

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

Содержимое события (event payload)

Событие autoNumeric:rawValueModified содержит стандартный объект Event, расширенный библиотекой AutoNumeric. Однако ключевая информация извлекается не из event.detail, а через API экземпляра.

Типичный сценарий обработки:

input.addEventListener('autoNumeric:rawValueModified', () => {
    const raw = anElement.getNumber();
});

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

Программные изменения и генерация события

Событие возникает не только при пользовательском вводе, но и при использовании методов API:

anElement.set(5000);

После вызова set() происходит:

  1. пересчет raw value;
  2. обновление formatted value;
  3. генерация autoNumeric:rawValueModified;
  4. генерация сопутствующих событий форматирования.

Аналогично ведут себя методы:

  • setNumber()
  • clear()
  • remove()
  • частично setUnformatted()

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

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

При очистке поля:

anElement.clear();

raw value становится:

  • null или 0 (в зависимости от конфигурации);
  • событие autoNumeric:rawValueModified срабатывает обязательно.

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

Особенности при конфигурации разделителей и локалей

AutoNumeric поддерживает различные форматы чисел:

  • европейский формат (1.234,56)
  • американский формат (1,234.56)
  • пользовательские разделители

Однако rawValueModified игнорирует форматирование. Независимо от локали:

  • raw value всегда приводится к стандартному JavaScript number;
  • событие срабатывает только при изменении этой нормализованной величины.

Использование в реактивных интерфейсах

Событие активно применяется в архитектурах, где требуется реактивная синхронизация состояния:

input.addEventListener('autoNumeric:rawValueModified', () => {
    formState.price = anElement.getNumber();
});

Это позволяет:

  • синхронизировать UI и модель данных;
  • избегать парсинга строковых значений;
  • исключить ошибки локализации при преобразовании чисел.

Обработка нескольких экземпляров

При работе с множеством полей важно учитывать изоляцию событий:

document.querySelectorAll('.money').forEach((el) => {
    const instance = new AutoNumeric(el, { decimalPlaces: 2 });

    el.addEventListener('autoNumeric:rawValueModified', () => {
        console.log(instance.getNumber());
    });
});

Каждый экземпляр генерирует собственное событие, привязанное к конкретному DOM-элементу. События не пересекаются между инстансами.

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

autoNumeric:rawValueModified часто используется как триггер валидации:

input.addEventListener('autoNumeric:rawValueModified', () => {
    const value = anElement.getNumber();

    if (value < 0) {
        input.classList.add('error');
    } else {
        input.classList.remove('error');
    }
});

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

Потенциальные проблемы и нюансы

Частые срабатывания

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

  • debounce;
  • throttling;
  • кеширование последнего значения.

Несинхронность с formatted value

formatted value может обновляться отдельно от raw value, поэтому нельзя полагаться на DOM-строку при бизнес-логике.

Изменение через внешние скрипты

Если значение input меняется напрямую через input.value = ..., событие AutoNumeric не срабатывает, если не используется API библиотеки.

Пример комплексной обработки

const input = document.querySelector('#amount');
const an = new AutoNumeric(input, {
    decimalPlaces: 2,
    minimumValue: '0'
});

let lastValue = null;

input.addEventListener('autoNumeric:rawValueModified', () => {
    const current = an.getNumber();

    if (current === lastValue) return;

    lastValue = current;

    updateServerModel(current);
});

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

Роль события в архитектуре AutoNumeric

autoNumeric:rawValueModified выступает как основной триггер изменения данных. Оно находится на уровне логики данных, а не представления, и поэтому используется в:

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

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

Оглавление