HTML DOM removeEventListener() 方法

Document 对象参考手册 Document 对象

移除由 addEventListener() 方法添加的 "mousemove" 事件：

<p>文档添加 onmousemove 事件句柄，当在文档中移动鼠标时会显示随机数。</p>
<p>点击按钮移除事件句柄。</p>
<button onclick="removeHandler()">点我</button>
<p id="demo"></p>
<script>
  document.addEventListener("mousemove", myFunction);

  function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
  }

  function removeHandler() {
    document.removeEventListener("mousemove", myFunction);
  }
</script>

尝试一下 »

定义和使用

document.removeEventListener() 方法用于移除由 document.addEventListener() 方法添加的事件句柄。

注意: 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。

匿名函数，类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

提示： 使用 element.addEventListener() 和 element.removeEventListener() 方法来添加或移除指定元素的事件句柄。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注意： Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。

语法

document.removeEventListener(event, function,
  useCapture)

参数值

参数 描述
event 必须。要移除的事件名称。

注意： 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

提示： 所有 HTML DOM 事件，可以查看我们完整的HTML DOM Event 对象参考手册。
function 必须。指定要移除的函数。
useCapture 可选。布尔值，指定移除事件句柄的阶段。

可能值：
  • true - 事件句柄在捕获阶段移除
  • false- 默认。事件句柄在冒泡阶段移除
注意： 如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。

技术细节

DOM 版本: DOM Level 2 events
返回值: 没有返回值
修改记录: 在 Firefox 6 和 Opera 12.0 中 useCapture 参数是可选的。 （在 Chrome、IE 和 Safari 中一直都是可选的）。

更多实例

如果浏览器不支持 removeEventListener() 方法，你可以使用 detachEvent() 方法实现。

<p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p>
<p>该实例演示了跨浏览器的解决方法。</p>
<p>文档中使用 addEventListener() 方法添加 onmousemove 事件句柄，当鼠标移动时会显示随机数。</p>
<p>点击按钮移除事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">点我</button>
<p id="demo"></p>
<script>
  if (document.addEventListener) {
    document.addEventListener("mousemove", myFunction);
  } else if (document.attachEvent) {
    document.attachEvent("onmousemove", myFunction);
  }

  function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
  }

  function removeHandler() {
    if (document.removeEventListener) {
      document.removeEventListener("mousemove", myFunction);
    } else if (document.detachEvent) {
      document.detachEvent("onmousemove", myFunction);
    }
  }
</script>

尝试一下 »

相关文章

JavaScript 教程: HTML DOM EventListener

JavaScript 参考手册: element.removeEventListener()

Document 对象参考手册 Document 对象