Удаление обработчиков: жизненный цикл интерфейса

Назначение

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

Как это работает

AbortController позволяет связать несколько обработчиков с одним сигналом. В учебном файле создайте кнопку id lesson-action. После регистрации контроллер принадлежит именно этому подключению и используется при его завершении.

Пример

const button = document.querySelector("#lesson-action");
const controller = new AbortController();
button.addEventListener("click", () => console.log("Учебное действие"), {signal:controller.signal});
function disposeLesson() {
  controller.abort();
}
// Вызовите disposeLesson(), когда учебный компонент больше не нужен.

Что должно получиться

До очистки нажатие вызывает сообщение, после disposeLesson обработчик удалён. Для нового подключения нужен новый контроллер: отменённый сигнал не становится активным повторно.

Граница применения и частая ошибка

Abort не отменяет работу уже выполняющегося кода и не очищает любые таймеры автоматически. Альтернатива removeEventListener требует той же ссылки на функцию и согласованного capture. Две одинаково написанные анонимные функции остаются разными объектами.

Самостоятельная проверка

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

Связанные материалы

• Поиск элементов
• События
• Диагностика