在此页

• 句法
• 注意事项
• 范例
• 规范
• 浏览器兼容性
• Polyfill to support older browsers
• 另请参阅
• 相关话题

EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener() . 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

句法

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

参数

type

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

listener

EventListener 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 布尔 which indicates that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree.
• mozSystemGroup : A 布尔 available only for code running in XBL or in Firefox's chrome which indicates if the listener will be added to the system group.

useCapture 可选

Specifies whether the EventListener to be removed is registered as a capturing listener or not. If this parameter is absent, a default value of false is assumed.

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

返回值

undefined

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 选项 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() :

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

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

element.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.

Now consider this:

element.addEventListener("mousedown", handleMouseDown, { passive: true });
						

Here, we specify an 选项 object in which passive 被设为 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.

仅 capture setting matters to removeEventListener() .

element.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() 当调用 removeEventListener() .

注意事项

若 EventListener is removed from an EventTarget while it is processing an event, it will not be triggered by the current actions. An EventListener will not be invoked for the event it was registered for after being removed. However, it can be reattached.

调用 removeEventListener() with arguments that do not identify any currently registered EventListener 在 EventTarget 不起作用。

范例

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() {
    if (toggle) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'yellow';
    }
    toggle = !toggle;
}
clickTarget.addEventListener('click',
    makeBackgroundYellow,
    false
);
mouseOverTarget.addEventListener('mouseover', function () {
    clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false
    );
});
						

规范

规范	状态	注释
DOM The definition of 'EventTarget.removeEventListener()' in that specification.	实时标准
DOM4 The definition of 'EventTarget.removeEventListener()' in that specification.	过时
DOM (文档对象模型) 2 级事件规范 The definition of 'EventTarget.removeEventListener()' in that specification.	过时	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
removeEventListener	Chrome 1	Edge 12	Firefox 1	IE 9 9 不支持 6 — 11 Alternate Name Older versions of IE supported an equivalent, proprietary EventTarget.detachEvent() 方法。 Alternate Name Uses the non-standard name: detachEvent	Opera 7	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0
type and listener parameters optional.	Chrome 1 — 49	Edge 12 — 79	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android 1 — 49	Chrome Android 18 — 49	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 1.0 — 5.0
useCapture parameter optional	Chrome 1	Edge 12	Firefox 6	IE 9	Opera 11.6	Safari Yes	WebView Android 1	Chrome Android 18	Firefox Android 6	Opera Android 12	Safari iOS Yes	Samsung Internet Android 1.0
Form with 选项 object supported (third parameter can be either options or a 布尔 , for backwards compatibility)	Chrome 49	Edge ≤18	Firefox 49	IE No	Opera Yes	Safari 10	WebView Android 49	Chrome Android 49	Firefox Android 49	Opera Android Yes	Safari iOS 10	Samsung Internet Android 5.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

使用非标名称。

Polyfill to support older browsers

addEventListener() and removeEventListener() are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing the use of addEventListener() and removeEventListener() in implementations that do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype was not supported until 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()
• EventTarget.detachEvent()

元数据

• 最后修改： Aug 28, 2020

相关话题

1. EventTarget
2. 构造函数

   1. EventTarget()
3. 方法

   1. addEventListener()
   2. dispatchEvent()
   3. removeEventListener()
4. DOM 事件相关页面

   1. CompositionEvent
   2. 事件
   3. EventListener
   4. FocusEvent
   5. InputEvent
   6. KeyboardEvent
   7. MouseEvent
   8. MouseScrollEvent
   9. MouseWheelEvent
   10. MutationEvent
   11. ProgressEvent
   12. UIEvent
   13. WheelEvent