JavaScript метод EventTarget.removeEventListener()

Определение и применение

JavaScript метод removeEventListener() объекта EventTarget позволяет удалить обработчик событий определенного типа для конкретной цели, который был установлен с использованием метода addEventListener().

Обработчик событий, который будет удален, выявляется с помощью сочетания типа событий, указанной функции прослушивателя событий и значения capture. Опции once, passive и signal при поиске обработчика не сравниваются.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.EventTarget.removeEventListener

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
removeEventListener	✓1	✓12	✓1	✓7	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
Form with options object supported (third parameter can be either options or a Boolean, for backwards compatibility)	✓49	✓16	✓49	✓36	✓10	✓49	✓49	✓36	✓10	✓5.0	✓49	✓10
useCapture parameter is optional	✓1	✓12	✓6	✓11.6	✓1	✓18	✓6	✓12	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

target.removeEventListener(type, listener);
target.removeEventListener(type, listener, options);
target.removeEventListener(type, listener, useCapture);

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

DOM Standard.

Значения параметров

Параметры EventTarget.removeEventListener()

Параметр	Описание
type	Строковое значение, представляющее тип события для которого необходимо удалить прослушиватель событий (значение чувствительно к регистру). Обязательный параметр.
listener	Функция обработчик события (EventListener), которая будет удалена из целевого объекта события. Обязательный параметр.
options	Объект, указывающий характеристики прослушивателя событий (является необязательным параметром). Доступная опция capture - задает логическое значение, которое определяет будут ли события этого типа удалены для фазы перехвата (capture phase), или для фазы всплытия (bubbling phase). Если передать логическое значение true, то функция будет удалена для перехватывающего обработчика, который был установлен для фазы перехвата. Значение по умолчанию false обработчик события будет удален для фазы всплытия. Значения опций once и passive, которые могут быть установлены с помощью метода addEventListener() не имеют значения для метода removeEventListener().
useCapture	Логическое значение, которое определяет будут ли события этого типа удалены для фазы перехвата (capture phase), или для фазы всплытия (bubbling phase). Если передать логическое значение true, то функция будет удалена для перехватывающего обработчика, который был установлен для фазы перехвата. Значение по умолчанию false обработчик события будет удален для фазы всплытия.

Пример использования

Базовое использование метода

Добавление и удаление обработчика у пунктов списка

Нажмите ▶, затем Add и кликните по пунктам списка: они станут зелёными. Нажмите Remove — цвет сбросится, а клики больше не будут менять цвет.

index.html

HTML

<button data-migration-click-0="">Add</button>
<button data-migration-click-2="">Remove</button>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

main.js

JavaScript

const listElements = document.querySelectorAll('li')

const addFunc = function () {
    for (let i = 0; i < listElements.length; i++) {
        listElements[i].addEventListener('click', setColor)
    }
}

const setColor = (e) => (e.target.style.color = 'green')

const removeFunc = function () {
    for (let i = 0; i < listElements.length; i++) {
        listElements[i].style.color = '#000'
        listElements[i].removeEventListener('click', setColor)
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    addFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')
document.querySelector('[data-migration-click-2]').addEventListener('click', function () {
    removeFunc()
})
document.querySelector('[data-migration-click-2]').removeAttribute('data-migration-click-2')

В этом примере мы разместили маркированный список (<ul>), внутри которого мы разместили пять элементов списка (<li>). С помощью метода querySelectorAll() мы выбрали все элементы <li> в документе, и инициализировали переменную этим значением.

Кроме того, мы разместили в документе две кнопки (элемент <button>), которым с помощью метода addEventListener() назначали функции, которые срабатывают при нажатии. При нажатии на первую кнопку срабатывает функция, которая с помощью цикла обходит все элементы списка, и с помощью метода addEventListener() устанавливает для каждого элемента <li> функцию обработчик события "click" (нажатие левой кнопкой мыши на элементе). Эта функция при нажатии на элемент изменяет цвет текста элемента на зеленый.

При нажатии на вторую кнопку срабатывает функция, которая с помощью цикла обходит все элементы списка, устанавливает каждому элементу цвет текста черный, и с помощью метода removeEventListener() удаляет у каждого элемента <li> функцию обработчик события "click" (нажатие левой кнопкой мыши на элементе). В результате чего, при клике на любой элемент <li> цвет текста элемента не будет изменяться до тех пор пока опять не будет нажата первая кнопка, которая установит для этого события обработчик.

Удаление событий с дополнительными параметрами

Как вы могли заметить из предыдущего примера для удаления какого-либо события с помощью метода removeEventListener(), вам необходимо указать тот же тип и функцию обработчик, но как насчет параметров options или useCapture?

Метод addEventListener() позволяет вам добавить один и тот же обработчик события более одного раза для одного и того же типа события, в том случае если параметры будут отличаться. Метод removeEventListener() позволяет проверить только значение ключа capture в объекте options (прочие возможные ключи игнорируются методом), или логическое значение в параметре useCapture.

Давайте рассмотрим пример в котором установим обработчик события для одного типа события как для фазы перехвата (capture phase), так и для фазы всплытия (bubbling phase) с использованием параметра useCapture:

Удаление обработчиков разных фаз

Нажмите ▶ и кликните по абзацу: в консоли два сообщения click (перехват и всплытие). Нажмите Remove (bubbling phase) — останется одно; Remove (capture phase) удалит второй обработчик.

index.html

HTML

<button data-example-event-0="">Add</button>
<button data-example-event-1="">Remove (bubbling phase)</button>
<button data-example-event-2="">Remove (capture phase)</button>
<p>Click me</p>

main.js

JavaScript

const p = document.querySelector('p') // выбираем первый элемент p в документе

const addFunc = function () {
    p.addEventListener('click', myFunc, false) // устанавливаем для элемента обработчик события нажатия левой кнопки мыши на элементе (стадия всплытия)
    p.addEventListener('click', myFunc, true) // устанавливаем для элемента обработчик события нажатия левой кнопки мыши на элементе (стадия перехвата)
}

const myFunc = function () {
    console.log('click') // выводим в консоль текстовую информацию
}

addFunc() // вызываем функцию при загрузке документа

const removeFunc = function () {
    p.removeEventListener('click', myFunc) // удаляем у элемента обработчик события нажатия левой кнопки мыши на элементе (стадия всплытия). Указывать явно false не обязательно.
}

const removeFunc2 = function () {
    p.removeEventListener('click', myFunc, true) // удаляем у элемента обработчик события нажатия левой кнопки мыши на элементе (стадия перехвата)
}

document.querySelector('[data-example-event-0]').addEventListener('click', function (event) {
    addFunc()
})
document.querySelector('[data-example-event-1]').addEventListener('click', function (event) {
    removeFunc()
})
document.querySelector('[data-example-event-2]').addEventListener('click', function (event) {
    removeFunc2()
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы разместили элемент <p>), с помощью метода querySelector() мы выбрали его и инициализировали переменную этим значением. Разместили в документе три кнопки (элемент <button>), которым с помощью метода addEventListener() назначали функции, которые срабатывают при нажатии.

При нажатии на первую кнопку срабатывает функция, которая с помощью метода addEventListener() устанавливает для элемента <p> функцию обработчик события "click" (нажатие левой кнопкой мыши на элементе) как для фазы всплытия (bubbling phase), так и для фазы перехвата (capture phase). Обратите внимание, что мы вызываем функцию addFunc() при загрузке документа.

При нажатии на вторую кнопку срабатывает функция, которая с помощью метода removeEventListener() удаляет у элемента <p> функцию обработчик события "click" (нажатие левой кнопкой мыши на элементе). Обратите внимание на важный момент, мы в данном случае удаляем только функцию, которая предназначена для стадии всплытия. Функция обработчик, предназначенная для стадии перехвата после удаления будет по прежнему срабатывать.

При нажатии на третью кнопку срабатывает функция, которая с помощью метода removeEventListener() удаляет у элемента <p> функцию обработчик события "click" (нажатие левой кнопкой мыши на элементе), предназначенную для стадии перехвата.