移除事件处理程序

要移除之前使用addEventListener()方法注册的事件处理程序，可以使用removeEventListener()方法，如下所示

element.removeEventListener(type, handler);Code language: CSS (css)

假设您有一个带有类.btn的按钮

<button class="btn">Register</button>Code language: HTML, XML (xml)

以下定义了click事件处理程序

function clickHandler(e) {
   console.log('Button Clicked');
}Code language: JavaScript (javascript)

以下将事件处理程序添加到按钮的单击事件中

const btn = document.querySelector('.btn');
btn.addEventListener('click', clickHandler);Code language: JavaScript (javascript)

要从按钮的单击事件中移除单击事件处理程序，可以使用removeEventListener()方法，如下所示

btn.removeEventListener('click', clickHandler);Code language: JavaScript (javascript)

注意，事件和事件处理程序必须相同。如果您使用匿名函数作为事件处理程序，您将无法移除它。以下代码不起作用

const btn = document.querySelector('.btn');
// add an event listner
btn.addEventListener('click', function(e){
   console.log('Button Clicked');
});
// this code won't work and has no effect
btn.removeEventListener('click', function() {
   console.log('Button Clicked');
});Code language: JavaScript (javascript)

大多数现代 Web 浏览器（包括 Chrome、Firefox 和 Edge）都支持removeEventListener()方法。

IE8 不支持removeEventListener()方法。它使用detachEvent()方法代替。

如果您仍然需要支持 IE8，可以使用以下跨浏览器通用的辅助函数

function removeEvent(el, type, handler) {
  if (el.detachEvent) {
    el.detachEvent('on' + type, handler);
  } else {
    el.removeEventListener(type, handler);
  }
}Code language: JavaScript (javascript)