JS怎么移除元素绑定的所有事件

我们在开发和使用组件时，难免会遇到需要销毁组件的需求，在组件销毁时，需要移除组件绑定的所有事件，那么该如何快速移除元素绑定的所有事件呢？

移除元素绑定事件，有以下几种方式:

element.removeEventListener()

element.removeEventListener('click', handler1);
element.removeEventListener('click', handler2);
// 移除所有 click 事件句柄

需要知道绑定的所有事件句柄，并一一移除，比较麻烦。

element.onclick = null

element.onclick = handler1;
element.onclick = handler2;
// 重写 onclick,之前的事件被移除
element.onclick = null;  
// 移除所有的 click 事件

这种方式只能移除指定类型(如 click)的事件，需要知道所有的事件类型并重置。

element.detachEvent()

只在 IE9 及以下有效,类似于 element.removeEventListener()。

element.setAttribute()

element.addEventListener('click', handler1);
element.setAttribute('onclick', 'handler2()');
// 移除 element.onclick 绑定的事件
element.removeAttribute('onclick');
element.removeEventListener('click', handler1);

这种方式需要知道绑定事件的所有方式,并逐一移除。

element.eventName = null

element.onclick = handler1; 
element.addEventListener('click', handler2);
element.attachEvent('onclick', handler3);

element.onclick = null;
element.click = null;  // 也移除事件!
element.detachEvent('onclick', handler3);
element.removeEventListener('click', handler2);

这种方式可以高效移除指定元素的所有事件，但是也带来破坏封装性的缺点，不推荐在库/框架中使用。

推荐在开发中使用 element.removeEventListener() 逐一移除事件，或 element.onclick = null 清空指定事件类型的所有事件。不推荐使用 element.eventName = null，因为此方式会影响组件的封装性。

本文永久链接: https://www.mulianju.com/remove-all-events/