Обработчик события: поймать повторное подключение

Назначение

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

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

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

Пример

const button = document.querySelector("#demo-action");
function reportClick() { console.count("Учебное нажатие"); }
if (button) {
  button.addEventListener("click", reportClick);
  button.addEventListener("click", reportClick);
  // Для прекращения наблюдения используйте эту же функцию:
  // button.removeEventListener("click", reportClick);
}

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

На странице с кнопкой demo-action два одинаковых добавления при этих параметрах не создают два независимых обработчика. Нажатие увеличивает счётчик один раз. Другие обработчики страницы этим примером не удаляются.

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

Две внешне одинаковые стрелочные функции — разные объекты функций. Если кнопка заменена новым DOM-узлом, обработчик старого узла не переносится автоматически. Не путайте проблему регистрации с всплытием события через родителей.

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

Создайте отдельную кнопку type="button" с нужным id. Сравните повторное добавление именованной функции и двух разных анонимных функций. Используйте точки останова событий в DevTools, затем удалите только учебные обработчики.

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

• Локальная страница
• Повторная проверка
• Консоль