Событийная модель AutoNumeric построена поверх стандартной системы DOM-событий и расширена собственными событиями, которые позволяют отслеживать изменения форматированного и «сырого» числового значения, а также взаимодействие пользователя с полем ввода. Библиотека не заменяет нативные события браузера, а дополняет их, обеспечивая синхронность между отображаемым значением и внутренним числом.
В основе работы лежит принцип разделения представления и данных: поле ввода содержит форматированную строку, тогда как внутреннее состояние AutoNumeric хранит числовое значение в нормализованном виде. Любое изменение одного из этих уровней сопровождается генерацией событий.
AutoNumeric использует комбинацию:
input,
change, focus, blur,
keydown, keypress, paste)autoNumeric:*)set,
setNumber, clear, remove)События проксируются через один внутренний обработчик, который синхронизирует форматирование и обновление состояния. Это позволяет гарантировать, что любое изменение значения — независимо от источника — проходит одинаковый цикл обработки.
Срабатывает при каждом изменении содержимого поля. В контексте AutoNumeric событие вызывается после того, как библиотека применит форматирование к введённому символу.
Ключевая особенность: значение в event.target.value уже
отформатировано.
const an = new AutoNumeric('#price', { currencySymbol: '$' });
document.querySelector('#price').addEventListener('input', (e) => {
console.log('Formatted value:', e.target.value);
});Генерируется при потере фокуса, если значение было изменено.
Поведение аналогично нативному change, но учитывает
внутреннюю нормализацию AutoNumeric.
Важно учитывать, что событие может не срабатывать при изменениях, которые не приводят к изменению числового значения (например, повторное форматирование).
Одно из ключевых пользовательских событий библиотеки. Срабатывает при изменении «сырого» числового значения, независимо от форматирования.
Событие полезно для синхронизации с бизнес-логикой (расчёты, отправка данных, валидация).
document.querySelector('#price').addEventListener('autoNumeric:rawValueModified', (e) => {
console.log('Raw value:', e.detail.newRawValue);
});Структура event.detail обычно содержит:
newRawValue — новое числовое значениеoldRawValue — предыдущее значениеformatted — текущее отображаемое значениеAutoNumeric не заменяет нативные события, но может изменять отображение значения при фокусировке. Часто используется переключение между форматированным и «чистым» отображением в зависимости от конфигурации.
const element = document.querySelector('#price');
element.addEventListener('focusin', () => {
console.log('Field focused');
});
element.addEventListener('focusout', () => {
console.log('Field blurred');
});При включённых настройках очистки при фокусе библиотека может временно изменять формат отображения (например, скрывать разделители тысяч).
AutoNumeric перехватывает ввод символов до их попадания в DOM-значение. Это позволяет:
Поведение основано на предобработке события keydown.
document.querySelector('#price').addEventListener('keydown', (e) => {
console.log('Key pressed:', e.key);
});Внутри AutoNumeric реализуется фильтрация:
При вставке значения из буфера обмена AutoNumeric перехватывает событие и выполняет предварительную очистку строки до применения форматирования.
Логика обработки:
document.querySelector('#price').addEventListener('paste', (e) => {
console.log('Paste detected');
});AutoNumeric генерирует события даже при изменении значения программными методами:
При вызове set() или setNumber()
инициируется цепочка обновления:
const an = new AutoNumeric('#price');
an.set(12345.67);Это приводит к генерации autoNumeric:rawValueModified,
даже если пользователь не взаимодействовал с полем.
Очистка значения также считается изменением состояния и вызывает соответствующие события.
an.clear();Событие позволяет отслеживать переход к пустому состоянию
(null или '' в зависимости от
конфигурации).
Удаление инстанса AutoNumeric сопровождается очисткой обработчиков событий и восстановлением нативного поведения элемента.
an.remove();После вызова все дальнейшие события AutoNumeric на элементе прекращаются.
AutoNumeric использует внутреннюю систему привязки обработчиков к DOM-элементу. При инициализации:
element.autoNumericПри уничтожении:
Кастомные события AutoNumeric всегда используют
CustomEvent, где основная информация передаётся через
detail.
Типичная структура:
{
newRawValue: 1500,
oldRawValue: 1200,
newValue: "1,500.00",
oldValue: "1,200.00",
isPristine: false
}Использование detail позволяет отделить данные
библиотеки от DOM-структуры и сохранять расширяемость без изменения
сигнатур событий.
При одном пользовательском действии может происходить цепочка событий:
keydowninputautoNumeric:rawValueModifiedchange и focusoutПорядок важен при интеграции с реактивными фреймворками, так как определяет момент синхронизации состояния.
При использовании React, Vue или Angular события AutoNumeric часто используются как источник синхронизации состояния.
Особенность: библиотека не зависит от фреймворка и не использует его lifecycle hooks, поэтому вся реактивность строится через DOM-события.
Это позволяет:
При повторной инициализации на одном элементе:
Это достигается за счёт хранения ссылки на текущий экземпляр внутри DOM-элемента и проверки существующего состояния перед инициализацией.
Ключевой механизм AutoNumeric заключается в синхронизации трёх уровней:
Каждое событие отражает изменение хотя бы одного из этих уровней. Это позволяет строить стабильную реактивную логику без необходимости опрашивать значение вручную.