Метод EventTarget.removeEventListener()

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

Синтаксис

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

Параметры

type
Строка, описывающая тип события, которое нужно удалить.
listener
EventListener функция, которую нужно удалить с элемента.
options Необязательный
Объект опций, описывающий характеристики обработчика события. Доступные опции:
  • capture: Boolean. Указывает на то, что события этого типа отправляются данному обработчику до того, как происходит их передача любым EventTarget, находящимся ниже него в дереве DOM.
  • passive: Boolean. Указывает на то, что listener никогда не будет вызывать preventDefault(). В противном случае (если listener вызовет preventDefault() ), user agent проигнорирует вызов и сгенерирует предупреждение в консоли.
useCapture Необязательный
Указывает, был ли удаляемый EventListenerзарегистрирован как перехватывающий обработчик, или нет. Если этот параметр отсутствует, предполагается значение по умолчанию:false.
Если обработчик был зарегистрирован дважды, один раз с перехватом (с capture) и один - без, каждый из них должен быть удален по отдельности. Удаление перехватывающего обработчика никак не затрагивает не-перехватывающюю версию этого же обработчика, и наоборот.
Заметка: useCapture требуется в большинстве основных браузеров старых версий. Если вы хотите поддерживать большую совместимость, вы всегда должны использовать параметр useCapture.

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

undefined.

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

В большинстве браузеров помимо типа события и функции важно лишь совпадение значений параметра 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);

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
removeEventListenerChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9
Полная поддержка 9
Нет поддержки 6 — 11
Замечания Альтернативное имя
Замечания Older versions of IE supported an equivalent, proprietary EventTarget.detachEvent() method.
Альтернативное имя Использует нестандартное имя: detachEvent
Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
type and listener parameters optional.Chrome Нет поддержки 1 — 49Edge Нет поддержки 12 — 79Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Нет поддержки 1 — 49Chrome Android Нет поддержки 18 — 49Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Нет поддержки 1.0 — 5.0
useCapture parameter optionalChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка ДаWebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 6Opera Android Полная поддержка 12Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 1.0
Form with options object supported (third parameter can be either options or a Boolean, for backwards compatibility)Chrome Полная поддержка 49Edge Полная поддержка ≤18Firefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 49Opera Android Полная поддержка ДаSafari iOS Полная поддержка 10Samsung Internet Android Полная поддержка 5.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

Gecko примечания

  • В версиях Firefox младше версии 6 браузер бросает исключение, если параметр useCapture не был явно указан как false. В Gecko младше 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6), 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); }
    }
  };
}

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