EventTarget.removeEventListener

概述

删除使用 EventTarget.addEventListener() 方法添加的事件

语法

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

type

一个字符串，表示需要移除的事件类型，如 "click"。

listener

需要移除的 EventListener 函数（先前使用 addEventListener 方法定义的）

useCapture 可选

指定需要移除的 EventListener 函数是否为事件捕获。如果无此参数，默认值为 false。

如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，一共两次，这两次事件需要分别移除。两者不会互相干扰。

备注

一个 EventTarget 上的 EventListener 被移除之后，如果此事件正在执行，会立即停止。 EventListener 移除之后不能被触发，但可以重新绑定。

使用 removeEventListener() 移除 EventTarget 上未绑定的 EventListener 不会起任何作用。

示例

以下例子展示了添加与删除监听事件：

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

浏览器兼容性

Gecko 备注

• 对于 Firefox 6 之前的版本，如果 useCapture 参数不为 false 则会报错。对于 Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 之前的版本，如果 useCapture 参数的值为 null 将会抛出异常。

Opera 备注

• Opera 12.00 中 useCapture 是可选的 (来源)。

WebKit 备注

• 在 Safari 5.1 and Chrome 13 中明确地将 useCapture 参数列为可选，但在那之前也是有效的。

相关链接

EventTarget.addEventListener().

规范

• removeEventListener

Polyfill

一些比较旧的浏览器不支持 addEventListener() 和 removeEventListener() 方法。可以将以下代码复制到脚本的开头来兼容这些旧版本的浏览器。值得注意的是，这个解决方案仍然不适用于 IE 7 及更早的 IE，因为 Element.prototype 属性直至 IE 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); }
    }
  };
}