Событие autoNumeric:initialized

Событие autoNumeric:initialized срабатывает в момент завершения инициализации экземпляра AutoNumeric и фиксирует состояние, при котором поле ввода уже полностью преобразовано библиотекой, все правила форматирования применены, а объект управления значением готов к работе. Это событие относится к жизненному циклу экземпляра и является ключевой точкой для подключения логики, зависящей от корректно настроенного форматированного ввода.

Инициализация AutoNumeric включает несколько последовательных этапов: парсинг начального значения элемента, применение конфигурации форматирования, установка внутренних слушателей и привязка API к DOM-элементу. Только после завершения всех этих шагов генерируется событие autoNumeric:initialized.

Событие диспатчится непосредственно на DOM-элементе, к которому был применён AutoNumeric, что позволяет использовать стандартные механизмы addEventListener без необходимости доступа к внутренним структурам экземпляра.

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

Подключение обработчика

Базовая регистрация обработчика выполняется через стандартный API событий DOM:

const input = document.querySelector('#amount');

input.addEventListener('autoNumeric:initialized', (event) => {
    console.log('AutoNumeric инициализирован');
});

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

Структура объекта события

Событие autoNumeric:initialized передаёт расширенный объект event, содержащий полезные данные о созданном экземпляре.

Основные поля event.detail:

  • autoNumericInstance — ссылка на созданный экземпляр AutoNumeric
  • rawValue — исходное числовое значение до форматирования
  • formattedValue — значение после применения форматирования
  • settings — финальная конфигурация экземпляра
  • domElement — элемент, к которому привязан экземпляр

Пример доступа к данным:

input.addEventListener('autoNumeric:initialized', (event) => {
    const anElement = event.detail.autoNumericInstance;

    console.log(anElement.getNumber());
    console.log(event.detail.formattedValue);
});

Наличие ссылки на экземпляр позволяет сразу выполнять операции set, get, clear, не дожидаясь дополнительных проверок готовности.

Время срабатывания и порядок выполнения

Событие возникает строго после завершения всех внутренних шагов:

  1. Создание экземпляра
  2. Применение конфигурации
  3. Преобразование начального значения
  4. Установка обработчиков событий ввода
  5. Привязка API к DOM
  6. Генерация autoNumeric:initialized

Это делает событие надёжной точкой синхронизации для внешней логики, зависящей от корректного состояния поля.

Важно учитывать, что если элемент уже был инициализирован ранее и происходит повторная инициализация после destroy, событие будет вызвано повторно.

Использование экземпляра внутри события

Наиболее частый сценарий — сохранение ссылки на экземпляр для дальнейшей работы без повторного поиска через DOM:

let amountAN;

input.addEventListener('autoNumeric:initialized', (event) => {
    amountAN = event.detail.autoNumericInstance;
});

function updateValue(value) {
    amountAN.set(value);
}

Такой подход исключает необходимость повторного обращения к AutoNumeric.getAutoNumericElement(...) и ускоряет работу в сложных формах.

Взаимодействие с несколькими полями

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

document.querySelectorAll('.price').forEach((el) => {
    el.addEventListener('autoNumeric:initialized', (event) => {
        console.log('Инициализировано поле:', event.detail.domElement);
    });
});

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

Делегирование событий

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

document.addEventListener('autoNumeric:initialized', (event) => {
    if (event.target.matches('.price')) {
        console.log('Готово поле цены');
    }
});

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

Повторная инициализация и уничтожение

При вызове destroy() экземпляр удаляется, а при повторной инициализации событие autoNumeric:initialized будет сгенерировано снова:

const an = AutoNumeric.getAutoNumericElement(input);

an.destroy();

AutoNumeric.set(input, 1234);

После повторного set формируется новый экземпляр, и событие снова становится доступным для прослушивания. Это важно учитывать при SPA-архитектурах, где элементы могут пересоздаваться без перезагрузки страницы.

Типичные сценарии применения

Инициализация зависимых компонентов

Часто необходимо синхронизировать другие элементы интерфейса с уже готовым форматированным полем:

input.addEventListener('autoNumeric:initialized', (event) => {
    const an = event.detail.autoNumericInstance;

    document.querySelector('#display').textContent = an.getFormatted();
});

Валидация после готовности поля

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

input.addEventListener('autoNumeric:initialized', (event) => {
    const value = event.detail.autoNumericInstance.getNumber();

    if (value < 0) {
        console.warn('Значение ниже допустимого диапазона');
    }
});

Логирование состояния формы

Событие удобно для отладки сложных форм с множеством числовых полей:

document.addEventListener('autoNumeric:initialized', (event) => {
    console.log('Поле готово:', {
        element: event.detail.domElement,
        value: event.detail.rawValue
    });
});

Особенности поведения в динамическом DOM

При работе с динамически добавляемыми элементами важно учитывать, что событие будет срабатывать только после повторной инициализации AutoNumeric на новом узле. Простое добавление input в DOM не вызывает событие автоматически.

Пример корректного сценария:

const newInput = document.createElement('input');
document.body.appendChild(newInput);

AutoNumeric.set(newInput, 1000);

newInput.addEventListener('autoNumeric:initialized', (event) => {
    console.log('Динамическое поле готово');
});

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

Ограничения и нюансы

  • Событие не предназначено для изменения состояния экземпляра во время инициализации
  • Повторная подписка без destroy может приводить к дублированию логики
  • В случае ручного вмешательства в DOM до завершения инициализации возможны несогласованные состояния
  • При использовании фреймворков важно учитывать жизненный цикл компонентов, чтобы не потерять событие при размонтировании

Интеграция с внешними библиотеками

При использовании AutoNumeric совместно с React, Vue или Angular событие может использоваться как точка синхронизации между DOM и состоянием приложения:

input.addEventListener('autoNumeric:initialized', (event) => {
    const value = event.detail.autoNumericInstance.getNumber();
    store.setState({ amount: value });
});

Такой подход позволяет избежать гонок состояния, когда React-рендер происходит до завершения форматирования.

Поведение при ошибках и некорректной конфигурации

Если инициализация не может быть завершена из-за некорректных настроек (например, конфликтующих параметров форматирования), событие autoNumeric:initialized не будет вызвано. Это делает его индикатором успешной готовности экземпляра.

В таких случаях обычно требуется обработка ошибок на уровне инициализации, а не через события DOM.

Оглавление