/ ↲
    Расширенный поиск

    JavaScript

    .removeEventListener()

    Перестаём слушать события браузера.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Удаляет обработчик события с элемента, установленный с помощью addEventListener().

    Как пишется

    Скопировано

    Добавим обработчик на элемент, а затем удалим его.

    Например, будем обрабатывать клики на любое место на странице, а затем удалим обработчик, передав в removeEventListener() те же аргументы, что и при добавлении:

            
          
          function handleMouseClick(event) {  console.log('Вы нажали на элемент:', event.target)}// Добавляем обработчик событияwindow.addEventListener('click', handleMouseClick)// Убираем обработчик событияwindow.removeEventListener('click', handleMouseClick)
          function handleMouseClick(event) {
  console.log('Вы нажали на элемент:', event.target)
}

// Добавляем обработчик события
window.addEventListener('click', handleMouseClick)

// Убираем обработчик события
window.removeEventListener('click', handleMouseClick)
    Открыть демо в новой вкладке

    Метод removeEventListener() принимает три аргумента. Первые два обязательные:

    • название события строкой;
    • функция-обработчик, которую нужно убрать с указанного события.

    Третий аргумент необязательный — это объект с настройками, в котором могут содержаться свойства capture и passive с булевыми значениями true либо false. Точно такие же опции можно передать и в .addEventListener().

            
          
          window.addEventListener('click', handleMouseClick, {  capture: true,  passive: true})// Аналогичные опции при удалении обработчикаwindow.removeEventListener('click', handleMouseClick, {  capture: true,  passive: true})
          window.addEventListener('click', handleMouseClick, {
  capture: true,
  passive: true
})

// Аналогичные опции при удалении обработчика
window.removeEventListener('click', handleMouseClick, {
  capture: true,
  passive: true
})

    Переданные настройки влияют на удаление обработчика события. Мы рекомендуем повторять в точности те же параметры, которые использовались в .addEventListener(), чтобы браузер точно знал какой обработчик нужно удалить.

    Например, создадим обработчик события и передадим третьим аргументом в опциях значение true. Если попробовать убрать событие, но ничего не передать в опциях в .removeEventListener(), то событие не уберётся.

            
          
          function handleMouseClick(event) {  console.log('Вы нажали на элемент:', event.target)}window.addEventListener('click', handleMouseClick, true)// Ничего не передаем в опциях в третьем аргументеwindow.removeEventListener('click', handleMouseClick)
          function handleMouseClick(event) {
  console.log('Вы нажали на элемент:', event.target)
}

window.addEventListener('click', handleMouseClick, true)

// Ничего не передаем в опциях в третьем аргументе
window.removeEventListener('click', handleMouseClick)

    Аналогичная ситуация, если сделать наоборот.

    Как понять

    Скопировано

    Браузер даёт возможность не только устанавливать обработчики событий, но и убирать их.

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

    Будет ли на самом деле удалён обработчик события зависит от того, какую функцию и какие опции передали вторым и третьим аргументами в .removeEventListener().

    Функции относятся к ссылочным типам данных, а, значит, две одинаково написанные функции будут считаться различными. Поэтому, если ранее в .addEventListener() использовалась анонимная функция, то убрать обработчик с помощью .removeEventListener() не получится.

            
          
          window.addEventListener('click', (event) => {  console.log('Клик!')})// Обработчик не будет удалён!window.removeEventListener('click', (event) => {  console.log('Клик!')})
          window.addEventListener('click', (event) => {
  console.log('Клик!')
})

// Обработчик не будет удалён!
window.removeEventListener('click', (event) => {
  console.log('Клик!')
})

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

    Браузер сравнивает опции, когда ищет обработчик события для удаления. Посмотрим ещё раз на пример выше, когда в .addEventListener() передали в опциях true, а в .removeEventListener() нет опций.

            
          
          function handleMouseClick(event) {  console.log('Вы нажали на элемент:', event.target)}window.addEventListener('click', handleMouseClick, true)// Обработчик не удалится, потому что опции не совпадаютwindow.removeEventListener('click', handleMouseClick)
          function handleMouseClick(event) {
  console.log('Вы нажали на элемент:', event.target)
}

window.addEventListener('click', handleMouseClick, true)

// Обработчик не удалится, потому что опции не совпадают
window.removeEventListener('click', handleMouseClick)

    Так происходит потому, что третий аргумент неявно устанавливается в undefined, а undefined превращается в false при конвертации в булев тип. Когда браузер ищет обработчик на удаление, он сравнивает опции и видит, что true !== false, значит, обработчик не будет удалён.

    На практике

    Скопировано

    Егор Огарков советует

    Скопировано

    🛠 Автоматическое очищение обработчика после первого срабатывания.

    Если нужно, чтобы событие сработало только один раз, можно не использовать removeEventListener(), а использовать опцию once в addEventListener().

            
          
          window.addEventListener('click', function (event) {  console.log('Клик!')}, { once: true })
          window.addEventListener('click', function (event) {
  console.log('Клик!')
}, { once: true })

    При первом клике обработчик сработает, а затем автоматически удалится. В этом случае можно даже использовать анонимную функцию, так как не нужно очищать обработчик вручную.

    🛠 Можно написать очищение обработчика в самом обработчике событий.

    Когда в браузерах не было возможности использовать опцию { once: true } при установке обработчика события, такое поведение делали самостоятельно:

            
          
          function handleClick(event) {  console.log('Клик!')  // Сразу же очищаем после вызова функции,  // обработчик сработает только один раз  window.removeEventListener('click', handleClick)}window.addEventListener('click', handleClick)
          function handleClick(event) {
  console.log('Клик!')

  // Сразу же очищаем после вызова функции,
  // обработчик сработает только один раз
  window.removeEventListener('click', handleClick)
}

window.addEventListener('click', handleClick)

    Другим примером может быть очищение обработчика по определённому условию. Добавим обработчик события клавиатуры, но по нажатию клавиши Esc будем очищать его.

            
          
          function handleKeypress(event) {  console.log('Нажата клавиша:', event.key)  if (event.key === 'Escape') {    window.removeEventListener('keypress', handleKeypress)  }}window.addEventListener('keypress', handleKeypress)
          function handleKeypress(event) {
  console.log('Нажата клавиша:', event.key)

  if (event.key === 'Escape') {
    window.removeEventListener('keypress', handleKeypress)
  }
}

window.addEventListener('keypress', handleKeypress)

    Читайте также