МетодremoveEventListener() интерфейсаEventTarget удаляет слушателя событий, зарегистрированного с помощьюEventTarget.addEventListener(). Удаляемый слушатель событийопределяется комбинацией типа события, функцией обработчика и дополнительными параметрами, влияющими на процесс обработки.

ВызовremoveEventListener() с аргументами, которые не определяют зарегистрированного наEventTargetслушателя событий, не имеет эффекта.

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

Слушатели событий также можно удалить передачей сигналаAbortSignal вaddEventListener() и последующим вызовомabort() на контроллере, владеющем сигналом.

Синтаксис

removeEventListener(type, listener)removeEventListener(type, listener, options)removeEventListener(type, listener, useCapture)

Параметры

type

Строка, описывающая тип события, которое нужно удалить.

listener

Функция обработчика события для удаления.

optionsНеобязательный

Объект настроек, описывающий характеристики обработчика события:

• capture: Логическое значение, определяющее зарегистрирован ли удаляемый слушатель событий на фазу захвата или нет. Если этот параметр опущен, то применяется значение по умолчаниюfalse.

useCaptureНеобязательный

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

Возвращаемое значение

Нет.

Определение слушателя событий для удаления

Иногда возникает необходимость удалить зарегистрированного с помощьюaddEventListener() слушателя событий.

Очевидно, что дляremoveEventListener() нужно указать те же параметрыtype иlistener. Но что делать с параметрамиoptions илиuseCapture?

addEventListener() позволяет добавить одного и того же слушателя для одного типа событий более одного раза если отличаются настройки. При удалении слушателяremoveEventListener() проверяет только флагcapture/useCapture. Его значение должно совпасть, а другие настройки не учитываются.

Например, представим такой вызовaddEventListener():

element.addEventListener("mousedown", handleMouseDown, true);

Теперь рассмотрим каждый из двух вызововremoveEventListener():

element.removeEventListener("mousedown", handleMouseDown, false); // Не сработаетelement.removeEventListener("mousedown", handleMouseDown, true); // Выполнится успешно

Первый вызов не сработает потому, что значениеuseCapture не совпадает. Второй вызов будет успешен, потому что значениеuseCapture совпадает.

Теперь рассмотрим такой случай:

element.addEventListener("mousedown", handleMouseDown, { passive: true });

Здесь мы задаём объектoptions, в котором значениеpassive установлено вtrue, а другие настройки не указаны, то есть будут иметь значение по умолчаниюfalse.

Теперь рассмотрим вызовыremoveEventListener() с разными параметрами. Те из них, в которыхcapture илиuseCapture установлены вtrue, не сработают, остальные выполнятся успешно.

Только настройкаcapture имеет значение при вызовеremoveEventListener().

element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Выполнится успешноelement.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Выполнится успешноelement.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Не сработаетelement.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Выполнится успешноelement.removeEventListener("mousedown", handleMouseDown, false); // Выполнится успешноelement.removeEventListener("mousedown", handleMouseDown, true); // Не сработает

Стоит отметить, что некоторые версии браузеров ведут себя противоречиво, поэтому если нет особых причин для иного, при вызовеremoveEventListener() лучше использовать те же параметры, которые использовались для вызоваaddEventListener().

Пример

В этом примере показано как можно добавить слушателя событийmouseover, который будет удалять слушателя событийclick.

const body = document.querySelector("body");const clickTarget = document.getElementById("click-target");const mouseOverTarget = document.getElementById("mouse-over-target");let toggle = false;function makeBackgroundYellow() {  body.style.backgroundColor = toggle ? "white" : "yellow";  toggle = !toggle;}clickTarget.addEventListener("click", makeBackgroundYellow, false);mouseOverTarget.addEventListener("mouseover", () => {  clickTarget.removeEventListener("click", makeBackgroundYellow, false);});

Спецификации

Совместимость с браузерами

Смотрите также

• EventTarget.addEventListener()