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

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

  • автор:

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

andrhohlov

Для удаления обработчика события, нужно передать ту же функцию, которую передавали при создании обработчика события.

Не вижу всей картины, происходящего у вас. Я делаю примерно так:

class SomeModule < constructor() < this.handlerShim = (e) =>< this.handler(e); >; > method1() < document.addEventListener('click', this.handlerShim); >method2() < document.removeEventListener('click', this.handlerShim); >handler(e) < console.log(e); >>

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

virtual_hack2root

Артур Мустафин @virtual_hack2root
.NET Core, JS, DevOps

var handler_button_right_click = this.play_right.bind(this); this.button_right.addEventListener('click', handler_button_right_click); //. this.button_right.removeEventListener('click', handler_button_right_click);

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

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

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. Аналогичная ситуация здесь.

Метод EventTarget.removeEventListener()

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

Синтаксис

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

Параметры

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

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

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

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

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

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

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

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

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

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

Примечания

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

Вызов removeEventListener() с параметрами, не соответствующими ни одному зарегистрированному EventListener (en-US) в 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.

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

.removeEventListener() — это метод JavaScript, который позволяет удалить ранее добавленный обработчик событий из элемента на веб-странице. Он используется для того, чтобы перестать слушать события браузера, когда это больше не нужно.

Форма записи

.removeEventListener() имеет следующий синтаксис:

element.removeEventListener(event, function, useCapture);
  • element
    • это элемент на веб-странице, из которого мы хотим удалить обработчик события.
    • это строка, представляющая тип события, на которое мы реагируем (например, ‘click’, ‘mouseover’, ‘keydown’ и т.д.).
    • это функция-обработчик, которую мы хотим удалить.
    • это опциональный параметр, который указывает, был ли обработчик вызван на этапе перехвата (true) или на этапе всплытия (false). По умолчанию значение useCapture равно false.

    Описание работы

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

    Пример использования .removeEventListener() для удаления обработчика клика на кнопке:

    const button = document.querySelector('button'); const handleClick = function() < console.log('Кнопка нажата!'); >; button.addEventListener('click', handleClick); // Через некоторое время удаляем обработчик клика setTimeout(function() < button.removeEventListener('click', handleClick); >, 5000);

    В данном примере мы добавляем обработчик клика на кнопку с помощью метода .addEventListener() , а затем удаляем его через 5 секунд с помощью метода .removeEventListener() . Функция-обработчик выводит сообщение в консоль при клике на кнопку.

    Заключение

    .removeEventListener() — это метод JavaScript, который позволяет удалить ранее добавленный обработчик событий из элемента на веб-странице. Он используется для того, чтобы перестать слушать события браузера, когда это больше не нужно. Корректное использование .removeEventListener() может помочь улучшить производительность и уменьшить использование ресурсов.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *