未知回调函数时如何移除DOM元素上绑定的event listener

我们常规移除事件监听器的方式需要传入和绑定时一致的 handler 引用：

// 绑定事件
function handler(){
 alert(0)
}
btn.addEventListener("click", handler)
// 移除事件
btn.removeEventListener("click", handler)

如果拿不到 handler 引用（比如第三方库绑定的事件未对外暴露内部 handler），可以通过以下几种方式处理： #

方案1：克隆元素替换原元素 #

直接克隆目标元素后替换原节点，所有绑定在原节点上的事件监听器都会被清除，是最简单暴力的实现方式：

// 第二个参数传true会同时克隆所有子节点，不需要保留子节点可以传false
const clonedBtn = btn.cloneNode(true);
btn.parentNode.replaceChild(clonedBtn, btn);

注意：该方案会清除元素上所有绑定的事件，如果你需要保留部分自行绑定的事件，需要在替换后重新绑定。 #

方案2：提前劫持addEventListener存储handler引用 #

如果你可以在第三方库加载执行前插入代码，可以重写EventTarget原型上的addEventListener方法，将所有绑定的事件handler存在全局的WeakMap中，后续移除时直接取存储的引用即可：

// 在第三方库加载前执行以下代码
const handlerStore = new WeakMap();
const rawAddEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function (type, handler, options) {
  // 初始化存储结构
  if (!handlerStore.has(this)) {
    handlerStore.set(this, Object.create(null));
  }
  if (!handlerStore.get(this)[type]) {
    handlerStore.get(this)[type] = [];
  }
  // 存储handler和配置项
  handlerStore.get(this)[type].push({ handler, options });
  // 执行原始绑定逻辑
  rawAddEventListener.call(this, type, handler, options);
};

// 需要移除某元素所有click事件时调用
handlerStore.get(btn)?.click?.forEach((item) => {
  btn.removeEventListener("click", item.handler, item.options);
});

方案3：拦截事件触发（非真正移除） #

如果不需要真的删除事件，只需要阻止事件触发，可以给目标元素绑定一个同类型的捕获阶段监听器，调用stopImmediatePropagation拦截后续所有同类型事件的执行：

// 第三个参数true表示在捕获阶段执行，优先级高于普通冒泡阶段的监听器
btn.addEventListener("click", (e) => e.stopImmediatePropagation(), true);

注意：该方案只会阻止原有事件触发，不会真的移除监听器，同时会拦截所有后续绑定的同类型事件。 #

注意：Chrome/Firefox调试控制台提供的getEventListenersAPI仅用于调试，无法在生产环境的前端代码中直接调用。

内容的提问来源于stack exchange，提问作者Md Shuvo