Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

EventTarget.removeEventListener

概述

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

语法

target.removeEventListener(type, listener[, useCapture])
type
一个字符串,表示需要移除的事件类型,如 "click"
listener
需要移除的 EventListener 函数(先前使用 addEventListener 方法定义的)
useCapture 可选
指定需要移除的 EventListener 函数是否为事件捕获。如果无此参数,默认值为 false
如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次,一共两次,这两次事件需要分别移除。两者不会互相干扰。
注意: useCapture 在较早版本的浏览器中是必填参数。

备注

一个 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);

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 7 1.0
useCapture made optional  (Yes) 6.0 9.0 (12.00)  (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 9.0 6.0 1.0

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().

规范

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); }
    }
  };
}

文档标签和贡献者

标签: 
 此页面的贡献者: pd4d10, teoli, ykjver
 最后编辑者: pd4d10,