Полный список событий

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

События делятся на несколько категорий в зависимости от стадии жизненного цикла уведомления.

Основные события

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

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    callbacks: {
        onShow: function() {
            console.log('Уведомление отображается');
        }
    }
}).show();

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

2. onShown Срабатывает после того, как уведомление полностью показано на странице. Применение:

callbacks: {
    onShown: function() {
        console.log('Уведомление полностью показано');
    }
}

Используется для отслеживания момента, когда уведомление доступно для взаимодействия.

3. onClose Вызывается в момент начала процесса закрытия уведомления. Применение:

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

Позволяет выполнить действия перед удалением уведомления из DOM, например, сохранить состояние или отменить действие.

4. onClosed Срабатывает после полного скрытия и удаления уведомления. Применение:

callbacks: {
    onClosed: function() {
        console.log('Уведомление полностью закрыто');
    }
}

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

5. onClick Срабатывает при клике на уведомление. Применение:

callbacks: {
    onClick: function() {
        console.log('Уведомление было кликнуто');
    }
}

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

6. onHover и onUnhover События наведения курсора на уведомление и ухода курсора соответственно. Применение:

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

Используются для временной остановки таймера закрытия уведомления или изменения стилей при наведении.

Расширенные события

onCloseClick Срабатывает при клике на кнопку закрытия уведомления, если используется кастомная кнопка или стандартная крестик-кнопка.

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

onButtonClick Применяется, если уведомление содержит кнопки (buttons) и пользователь нажал одну из них.

callbacks: {
    onButtonClick: function(button) {
        console.log('Нажата кнопка: ', button);
    }
}

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

onAfterShow и onAfterClose Дополнительные события, которые дают возможность запускать код сразу после завершения анимаций появления и скрытия уведомления.

Практическое использование событий

  1. Логирование действий пользователя: все действия по кликам, закрытиям и наведению можно фиксировать для аналитики.
  2. Управление очередью уведомлений: события onClosed позволяют запускать следующее уведомление только после полного закрытия предыдущего.
  3. Интерактивные уведомления: кнопки, ссылки и кликабельные уведомления управляются через события onClick и onButtonClick.
  4. Анимация и стили: события onShow, onShown, onClose и onClosed дают полный контроль над визуальной частью уведомлений, позволяя запускать кастомные CSS-анимации или JavaScript-эффекты.

Регистрация событий через callbacks и методы

События можно регистрировать как через объект callbacks при создании уведомления, так и динамически через методы .on() и .off().

Пример динамической регистрации:

let noty = new Noty({ text: 'Динамическое уведомление' });
noty.on('onClick', function() {
    console.log('Динамический клик');
});
noty.show();

Для удаления слушателя используется метод .off('имя_события').

Итоговая схема событий

Событие Когда срабатывает
onShow Начало отображения уведомления
onShown Полное отображение уведомления
onClose Начало закрытия уведомления
onClosed Уведомление полностью закрыто
onClick Клик на уведомление
onHover Наведение курсора на уведомление
onUnhover Уход курсора с уведомления
onCloseClick Клик по кнопке закрытия
onButtonClick Клик по кнопке внутри уведомления
onAfterShow После завершения анимации появления
onAfterClose После завершения анимации скрытия

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

Оглавление