Как удалить обработчик событий js

Для удаления обработчика событий используется метод removeEventListener() . Первым параметром передаётся тип события, а вторым функция-обработчик:

const div = document.getElementById('div'); const listener = (event) =>  // обработчик события >; div.addEventListener('click', listener); // добавляем обработчик div.removeEventListener('click', listener); // удаляем обработчик

Метод EventTarget.removeEventListener()

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

Синтаксис

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

Параметры

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

EventListener функция, которую нужно удалить с элемента.

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

capture : Boolean . Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым EventTarget , находящимся ниже него в дереве DOM.
passive : Boolean . Указывает на то, что listener никогда не будет вызывать preventDefault() . В противном случае (если listener вызовет preventDefault() ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.

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

Если обработчик был зарегистрирован дважды, один раз с перехватом (с capture ) и один — без, каждый из них должен быть удалён по отдельности. Удаление перехватывающего обработчика никак не затрагивает неперехватывающую версию этого же обработчика, и наоборот.

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

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

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

В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра useCapture / options.capture , но так как это поведение не закреплено стандартом, наилучшим способом будет указание для removeEventListener() в точности тех же параметров, что были переданы в addEventListener() .

Примечания

Если EventListener был удалён из EventTarget в процессе обработки события (например предшествующим EventListener того же типа), он не будет вызван. После удаления, EventListener не будет вызываться, однако его можно назначить заново.

Вызов removeEventListener() с параметрами, не соответствующими ни одному зарегистрированному EventListener в EventTarget , не имеет никакого эффекта.

Пример

Это пример добавления и последующего удаления обработчика событий.

var div = document.getElementById("div"); var listener = function (event)  /* do something here */ >; div.addEventListener("click", listener, false); div.removeEventListener("click", listener, false);

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

BCD tables only load in the browser

Gecko примечания

В версиях Firefox младше версии 6 браузер бросает исключение, если параметр useCapture не был явно указан как false. В Gecko младше 9.0, addEventListener() бросает исключение, если параметр listener равен null ; в настоящее время метод отрабатывает без ошибки, но при этом не производит никаких действий.

Opera примечания

В Opera 12.00 параметр useCapture — опциональный (source).

WebKit примечания

Несмотря на то, что WebKit явно добавил » [optional] » к параметру useCapture в Safari 5.1 и Chrome 13, это работало и до изменений.

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

Полифилы для поддержки старых браузеров

addEventListener() и removeEventListener() отсутствуют в старых браузерах. Это ограничение можно обойти, вставив следующий код в начале ваших скриптов, что позволяет использовать addEventListener() и removeEventListener() в версиях, не поддерживающих эти методы нативно. Тем не менее, этот метод не работает в Internet Explorer версии 7 и ниже, так как расширение Element.prototype не поддерживалось в более ранних версиях Internet Explorer ранее 8.

if (!Element.prototype.addEventListener)  var oListeners = >; function runListeners(oEvent)  if (!oEvent)  oEvent = window.event; > for ( var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId  oEvtListeners.aEls.length; iElId++ )  if (oEvtListeners.aEls[iElId] === this)  for (iLstId; iLstId  oEvtListeners.aEvts[iElId].length; iLstId++)  oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); > break; > > > Element.prototype.addEventListener = function ( sEventType, fListener /*, useCapture (will be ignored!) */, )  if (oListeners.hasOwnProperty(sEventType))  var oEvtListeners = oListeners[sEventType]; for ( var nElIdx = -1, iElId = 0; iElId  oEvtListeners.aEls.length; iElId++ )  if (oEvtListeners.aEls[iElId] === this)  nElIdx = iElId; break; > > if (nElIdx === -1)  oEvtListeners.aEls.push(this); oEvtListeners.aEvts.push([fListener]); this["on" + sEventType] = runListeners; > else  var aElListeners = oEvtListeners.aEvts[nElIdx]; if (this["on" + sEventType] !== runListeners)  aElListeners.splice(0); this["on" + sEventType] = runListeners; > for (var iLstId = 0; iLstId  aElListeners.length; iLstId++)  if (aElListeners[iLstId] === fListener)  return; > > aElListeners.push(fListener); > > else  oListeners[sEventType] =  aEls: [this], aEvts: [[fListener]] >; this["on" + sEventType] = runListeners; > >; Element.prototype.removeEventListener = function ( sEventType, fListener /*, useCapture (will be ignored!) */, )  if (!oListeners.hasOwnProperty(sEventType))  return; > var oEvtListeners = oListeners[sEventType]; for ( var nElIdx = -1, iElId = 0; iElId  oEvtListeners.aEls.length; iElId++ )  if (oEvtListeners.aEls[iElId] === this)  nElIdx = iElId; break; > > if (nElIdx === -1)  return; > for ( var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId  aElListeners.length; iLstId++ )  if (aElListeners[iLstId] === fListener)  aElListeners.splice(iLstId, 1); > > >; >

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

EventTarget.addEventListener() .
Non-standard EventTarget.detachEvent() (en-US).

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Метод removeEventListener – Как удалить обработчик события?

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

Метод removeEventListener имеет такой же синтаксис, как и метод addEventListener.

Таким образом в параметрах метода removeEventListener указывается то же событие и та же функция-обработчик , которые передавались при назначении события.

Обработчик события срабатывает всегда

Сначала рассмотрим ситуацию, когда обработчик срабатывает каждый раз при возникновении события.

     JavaScript    https://www.youtube.com/

'use strict'; // Получаем доступ к первой кнопке const btn = document.querySelector('button'); // Функция-обработчик const deleteElement = () => < alert('Click'); >// Назначаем событие и Функцию-обработчик btn.addEventListener('click', deleteElement);

Результат в Браузере

Здесь каждый раз при возникновении события, т.е. при клике на 1-ой кнопке, срабатывает обработчик события и появляется модальное окно.

Метод removeEventListener

Теперь при помощи метода removeEventListener удалим обработчик события сразу после того, как событие возникло.

'use strict'; // Получаем доступ к первой кнопке const btn = document.querySelector('button'); // Функция-обработчик const deleteElement = () => < alert('Click'); btn.removeEventListener('click', deleteElement); // Удаляем обработчик >// Назначаем событие и Функцию-обработчик btn.addEventListener('click', deleteElement);

Результат в Браузере

Обработчик события срабатывает один раз — при первом клике на кнопке, так как затем при помощи метода removeEventListener обработчик события удаляется.

site.komp36.ru Как работать на себя? Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.

site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов

site.komp36.ru Продающий лендинг «Установка и продажа окон» Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Отзывы и комментарии:

Добавил(а): Роман
Дата: 2022-01-12

Спасибо вам за все ваши материалы они мне очень помогли повторить и систематизировать знания и познать новые моменты . Удачи и всех благ Вам .

Добавил: Admin
Дата: 2022-01-16

Пожалуйста. Спасибо и Вам

Как удалить обработчик события после того, как событие произошло?

Проблема очевидна: я не знаю, когда произойдет событие. Но, тем не менее, когда оно произойдет, мне нужно обработчик как-то удалить. То есть нечто подобное не срабатывает:

var func = function(event) < // . el.removeEventListener("event", func); >; el.addEventListener("event", func);

А если сделать так:

el.addEventListener("event", func); el.removeEventListener("event", func);

то, очевидно, обработчик удалится сразу после того, как был навешен. Соответственно, и событие отловить не удастся. Собственно, интересует «workaround». Была идея реализовать некий «after-filter», который бы выполнялся каждый раз после выполнения callback’а, но тогда этот «after-filter» сам станет частью этого же callback’а, что значит, что удаление обработчика не произойдет. По поводу самостоятельного поиска решений. Искал. Наткнулся на этот ответ. Почему он должен работать — не понимаю, ведь он противоречит словам MDN. Аналогичная ситуация здесь.

Как удалить обработчик событий js