Обработчик клика на кнопку

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

В основе лежит передача функции-обработчика в конфигурацию кнопки, создаваемой через Noty.button.

Создание кнопки с обработчиком

Кнопки добавляются в уведомление через параметр buttons. Каждая кнопка создаётся с помощью фабричного метода:

new Noty({
  text: 'Удалить элемент?',
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Удаление подтверждено');
    }),

    Noty.button('Нет', 'btn btn-error', function () {
      console.log('Удаление отменено');
    })
  ]
}).show();

Ключевые элементы:

  • Первый аргумент — текст кнопки
  • Второй — CSS-классы
  • Третий — функция-обработчик клика

Контекст выполнения обработчика

Внутри функции обработчика доступен объект уведомления через this. Это позволяет управлять самим уведомлением:

Noty.button('Закрыть', 'btn btn-primary', function () {
  this.close();
});

this указывает на экземпляр Noty, что даёт доступ к методам:

  • this.close() — закрытие уведомления
  • this.setText() — изменение текста
  • this.setType() — изменение типа уведомления

Передача параметров в обработчик

Если требуется использовать внешние данные, применяется замыкание:

let itemId = 42;

new Noty({
  text: 'Удалить элемент #' + itemId + '?',
  buttons: [
    Noty.button('Удалить', 'btn btn-danger', function () {
      deleteItem(itemId);
      this.close();
    })
  ]
}).show();

Функция deleteItem получит доступ к переменной itemId за счёт области видимости.

Асинхронные обработчики

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

Noty.button('Сохранить', 'btn btn-success', async function () {
  try {
    await saveData();
    this.setText('Сохранено');
    this.setType('success');
  } catch (e) {
    this.setText('Ошибка сохранения');
    this.setType('error');
  }
});

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

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

Управление закрытием уведомления

По умолчанию уведомление не закрывается автоматически при клике на кнопку. Это поведение контролируется вручную:

Noty.button('ОК', 'btn btn-primary', function () {
  this.close();
});

Возможен сценарий без закрытия:

Noty.button('Повторить', 'btn btn-warning', function () {
  retryOperation();
});

Работа с несколькими кнопками

Каждая кнопка имеет независимый обработчик:

new Noty({
  text: 'Выберите действие',
  buttons: [
    Noty.button('Сохранить', 'btn btn-success', function () {
      save();
      this.close();
    }),

    Noty.button('Отмена', 'btn btn-secondary', function () {
      this.close();
    }),

    Noty.button('Удалить', 'btn btn-danger', function () {
      remove();
      this.close();
    })
  ]
}).show();

Это позволяет реализовать полноценные диалоговые окна.

Изменение состояния уведомления из обработчика

Обработчик может изменять внешний вид и содержимое уведомления:

Noty.button('Загрузить', 'btn btn-primary', function () {
  this.setText('Загрузка...');
  this.setType('information');

  fetchData().then(() => {
    this.setText('Готово');
    this.setType('success');
  });
});

Деактивация кнопки после клика

Для предотвращения повторных нажатий:

Noty.button('Отправить', 'btn btn-success', function () {
  let button = this.barDom.querySelector('.btn-success');
  button.disabled = true;

  sendData().finally(() => {
    button.disabled = false;
  });
});

this.barDom предоставляет доступ к DOM-структуре уведомления.

Использование делегирования событий

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

Noty.button('Подробнее', 'btn btn-info', function () {
  openModal();
});

При необходимости можно комбинировать с внешними слушателями событий, но это усложняет архитектуру и редко требуется.

Типичные ошибки

Потеря контекста this:

Noty.button('Ошибка', 'btn', () => {
  this.close(); // не сработает
});

Стрелочные функции не имеют собственного this. Используется обычная функция:

function () {
  this.close();
}

Отсутствие закрытия уведомления:

Noty.button('ОК', 'btn', function () {
  doSomething();
});

Если закрытие необходимо — его нужно вызвать явно.

Дублирование логики:

При повторяющихся действиях лучше выносить обработчики:

function handleConfirm() {
  console.log('Подтверждено');
}

Noty.button('Да', 'btn btn-success', handleConfirm);

Кастомизация поведения

Обработчик может управлять не только уведомлением, но и всей страницей:

Noty.button('Перейти', 'btn btn-primary', function () {
  window.location.href = '/dashboard';
});

или:

Noty.button('Открыть', 'btn btn-info', function () {
  document.querySelector('#panel').classList.add('active');
});

Комбинирование с таймерами

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

Noty.button('Применить', 'btn btn-success', function () {
  applyChanges();

  setTimeout(() => {
    this.close();
  }, 1000);
});

Повторное использование уведомлений

Можно создавать шаблоны с заранее заданными обработчиками:

function confirmDialog(text, onConfirm) {
  return new Noty({
    text,
    buttons: [
      Noty.button('Да', 'btn btn-success', function () {
        onConfirm();
        this.close();
      }),
      Noty.button('Нет', 'btn btn-secondary', function () {
        this.close();
      })
    ]
  });
}

Использование:

confirmDialog('Удалить файл?', deleteFile).show();

Итоговая структура кнопки

Noty.button(
  'Текст кнопки',
  'css-классы',
  function () {
    // логика
    this.close();
  },
  { id: 'custom-id', 'data-action': 'confirm' }
);

Четвёртый аргумент — объект с HTML-атрибутами, расширяющий возможности кастомизации.

Практическое применение

  • подтверждение действий (удаление, отправка)
  • уведомления с выбором
  • асинхронные операции с обратной связью
  • мини-диалоги без модальных окон
  • управление состоянием интерфейса через события

Обработчик клика превращает уведомления Noty из пассивного элемента интерфейса в полноценный инструмент взаимодействия.

Оглавление