Список доступных событий

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

onShow

Описание: Срабатывает в момент отображения нотификации на странице. Использование: Позволяет выполнить действия сразу после появления уведомления, например, запуск анимации или изменение состояния интерфейса.

new Noty({
    text: 'Пример уведомления',
    type: 'info',
    callbacks: {
        onShow: function() {
            console.log('Нотификация появилась');
        }
    }
}).show();

Особенности:

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

onShown

Описание: Срабатывает после того, как нотификация полностью отображена и анимация завершена. Использование: Идеально подходит для взаимодействия с DOM-элементами нотификации, когда они уже доступны пользователю.

callbacks: {
    onShown: function() {
        console.log('Нотификация полностью показана');
    }
}

Особенности:

  • Отличается от onShow тем, что гарантированно срабатывает после окончания анимации.
  • Может использоваться для отслеживания видимости уведомлений или запуска таймеров.

onClose

Описание: Активируется в момент начала закрытия уведомления. Применение: Используется для подготовки к удалению нотификации, выполнения логики перед исчезновением, например, отмены связанных процессов.

callbacks: {
    onClose: function() {
        console.log('Началось закрытие уведомления');
    }
}

Особенности:

  • Срабатывает перед onClosed.
  • Можно использовать для анимаций выхода или сохранения состояния.

onClosed

Описание: Срабатывает после полного удаления уведомления из DOM. Применение: Подходит для очистки ресурсов, удаления временных данных, уведомления других компонентов о завершении работы нотификации.

callbacks: {
    onClosed: function() {
        console.log('Нотификация удалена');
    }
}

Особенности:

  • Гарантирует, что DOM-элемент больше не существует.
  • Можно использовать для повторного вызова уведомлений или подсчета статистики закрытых уведомлений.

onClick

Описание: Срабатывает при клике на уведомление. Применение: Позволяет реализовать интерактивное поведение, например, переход по ссылке или выполнение функции.

callbacks: {
    onClick: function() {
        alert('Вы кликнули на уведомление');
    }
}

Особенности:

  • Работает независимо от типа уведомления.
  • Можно комбинировать с onClose для закрытия уведомления после клика.

onHover

Описание: Срабатывает при наведении курсора на уведомление. Применение: Используется для приостановки таймера автоматического закрытия или изменения стиля.

callbacks: {
    onHover: function() {
        console.log('Курсор наведен на уведомление');
    }
}

Особенности:

  • Полезно для реализации «паузы» автозакрытия.
  • Можно применять для динамического выделения уведомления.

onUnhover

Описание: Срабатывает при уходе курсора с уведомления. Применение: Часто применяется вместе с onHover, чтобы возобновлять таймер автозакрытия или возвращать исходный стиль.

callbacks: {
    onUnhover: function() {
        console.log('Курсор покинул уведомление');
    }
}

Особенности:

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

onCloseClick

Описание: Срабатывает при клике на кнопку закрытия уведомления. Применение: Позволяет обработать действия пользователя при намерении закрыть уведомление, например, отменить закрытие или записать событие.

callbacks: {
    onCloseClick: function() {
        console.log('Клик по кнопке закрытия');
    }
}

Особенности:

  • Позволяет контролировать логику перед фактическим закрытием.
  • Может использоваться для подтверждения действия пользователя.

Особенности работы событий

  • Все события задаются через объект callbacks при создании экземпляра Noty.
  • События могут комбинироваться, позволяя строить сложную логику отображения уведомлений.
  • События предоставляют полный контроль над жизненным циклом уведомления: от показа до окончательного удаления из DOM.

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

Оглавление