Метод EventTarget.addEventListener()
позволяет зарегистрировать определённый обработчик события для генератора событий EventTarget
. Зарегистрированное таким образом событие, будет обрабатываться каждый раз при его возникновении. Однако в ряде случаев логика приложения требует только единовременной его обработки.
Поэтому часто можно встретить типичный вопрос о том, “каким образом можно обработать событие только один раз”? Для решения стоящей задачи, предлагаю рассмотреть следующий фрагмент JavaScript-кода:
element.addEventListener('click', function cb(event) {
// выполнение обработки события click
event.currentTarget.removeEventListener(event.type, cb);
});
Данный фрагмент кода демонстрирует удаление обработчика события, зарегистрированного при помощи метода EventTarget.addEventListener()
, после выполнения кода его обработки. Для этой цели используется метод EventTarget.removeEventListener().
Если прочитать подробнее описание метода EventTarget.addEventListener(), можно обнаружить третий параметр – options
. Этот параметр является объектом, определяющим характеристику поведения слушателя события. Зная о возможности использования параметра options
, рассмотренный ранее код может быть значительно упрощён:
element.addEventListener('click', function(event) {
// выполнение обработки события click
}, {once: true});
Как видно, использование параметра once
позволяет не отслеживать имя события (event.type
) и используемое имя функции обратного вызова (cb
). Однако с целью обеспечения совместимости исполняемого JavaScript-кода с различными версия веб-браузеров, рекомендуется использовать первый вариант.
Для того, чтобы снять возможные дополнительные вопросы по использованию приведённого кода, предлагаю рассмотреть полный пример реализации единовременной обработки нажатия кнопки с выводом модального окна:
<html>
<head>
<meta charset="UTF-8">
<title>Пример единовременной обработки события</title>
<style>
body {
background-color:antiquewhite;
}
main {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
input {
padding: 1em;
}
</style>
</head>
<body>
<main>
<input type="button" value="Нажми меня!">
</main>
<script>
document.querySelector('input').addEventListener('click', function cb(event) {
document.body.style.backgroundColor = 'lightblue';
alert('Это сообщение выводится только один раз. Повторные нажатия кнопки будут проигнорированы');
event.currentTarget.removeEventListener(event.type, cb);
});
</script>
</body>
</html>
Теперь вы знаете один из возможных, но в ряде случаев наиболее оптимальный, способ произвести единовременную обработку события, используя при этом чистый JavaScript без подключения дополнительных библиотек.