Единовременная обработка события для элемента на JavaScript

 

 JavaScriptсниппет

Метод 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 без подключения дополнительных библиотек.