Урок: проверить обработчик с once

Назначение

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

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

Для воспроизводимого примера используется отдельная кнопка в памяти и программный click. Счётчик изменяется в обработчике. Эти события синтетические и не доказывают полноценность пользовательского сценария в браузере.

Пример

const button = document.createElement("button");
button.type = "button";
let calls = 0;
button.addEventListener("click", () => {
  calls += 1;
}, {once:true});
button.click();
button.click();
console.log("Число вызовов:", calls);

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

Счётчик равен 1, хотя click вызван дважды. Обработчик удалён после первой обработки. Новая отдельная регистрация снова сможет сработать один раз.

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

Once не защищает сервер от повторной операции и не гарантирует успешность асинхронного действия. Если первый вызов завершился ошибкой, обработчик уже снят. Для повторной попытки нужно явно проектировать состояние, а не рассчитывать на эту опцию как на бизнес-правило.

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

В собственной видимой кнопке повторите опыт мышью и клавиатурой. Затем намеренно зарегистрируйте две разные функции с once и посчитайте вызовы. Объясните, почему получилось два действия при первом событии.

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

• Исходник и DOM
• Консоль
• Повторная проверка