Javascript removing all event listeners

.remove Event Listener ( )

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

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

 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)    Скопировать Скопировано Не удалось скопировать   

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

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

 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 >)    Скопировать Скопировано Не удалось скопировать   

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

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

 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)    Скопировать Скопировано Не удалось скопировать   

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

Хорошим тоном считается убирать обработчик сразу же, как он перестал быть нужен.

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

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

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

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

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

 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 , значит обработчик не будет удалён.

На практике

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

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

Скопировать ссылку «Егор Огарков советует» Скопировано

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

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

 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', handleClick) function handleKeypress(event)  console.log('Нажата клавиша:', event.key) if (event.key === 'Escape')  window.removeEventListener('keypress', handleKeypress) > > window.addEventListener('keypress', handleClick)    Скопировать Скопировано Не удалось скопировать   

Источник

EventTarget: removeEventListener() method

The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.

Calling removeEventListener() with arguments that do not identify any currently registered event listener on the EventTarget has no effect.

If an event listener is removed from an EventTarget while another listener of the target is processing an event, it will not be triggered by the event. However, it can be reattached.

Warning: If a listener is registered twice, one with the capture flag set and one without, you must remove each one separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.

Event listeners can also be removed by passing an AbortSignal to an addEventListener() and then later calling abort() on the controller owning the signal.

Syntax

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

Parameters

A string which specifies the type of event for which to remove an event listener.

The event listener function of the event handler to remove from the event target.

An options object that specifies characteristics about the event listener.

The available options are:

• capture : A boolean value that specifies whether the event listener to be removed is registered as a capturing listener or not. If this parameter is absent, the default value false is assumed.

A boolean value that specifies whether the event listener to be removed is registered as a capturing listener or not. If this parameter is absent, the default value false is assumed.

Return value

Matching event listeners for removal

Given an event listener previously added by calling addEventListener() , you may eventually come to a point at which you need to remove it. Obviously, you need to specify the same type and listener parameters to removeEventListener() . But what about the options or useCapture parameters?

While addEventListener() will let you add the same listener more than once for the same type if the options are different, the only option removeEventListener() checks is the capture / useCapture flag. Its value must match for removeEventListener() to match, but the other values don’t.

For example, consider this call to addEventListener() :

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

Now consider each of these two calls to removeEventListener() :

.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds 

The first call fails because the value of useCapture doesn’t match. The second succeeds, since useCapture matches up.

.addEventListener("mousedown", handleMouseDown,  passive: true >); 

Here, we specify an options object in which passive is set to true , while the other options are left to the default value of false .

Now look at each of these calls to removeEventListener() in turn. Any of them in which capture or useCapture is true fail; all others succeed.

Only the capture setting matters to removeEventListener() .

.removeEventListener("mousedown", handleMouseDown,  passive: true >); // Succeeds element.removeEventListener("mousedown", handleMouseDown,  capture: false >); // Succeeds element.removeEventListener("mousedown", handleMouseDown,  capture: true >); // Fails element.removeEventListener("mousedown", handleMouseDown,  passive: false >); // Succeeds element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds element.removeEventListener("mousedown", handleMouseDown, true); // Fails 

It’s worth noting that some browser releases have been inconsistent on this, and unless you have specific reasons otherwise, it’s probably wise to use the same values used for the call to addEventListener() when calling removeEventListener() .

Example

This example shows how to add a mouseover -based event listener that removes a click -based event listener.

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); >); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник