.removeEventListener()

Удаляет обработчик события с элемента, установленный с помощью 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, значит обработчик не будет удалён.

        
          
          window.addEventListener('click', function (event) {  console.log('Клик!')}, { once: true })
          window.addEventListener('click', function (event) {
  console.log('Клик!')
}, { 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)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          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)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать