Javascript中如何移除所有绑定的mousewheel滚轮事件监听器

removeEventListener 方法的第二个参数，必须和你调用 addEventListener 绑定同一事件时传入的回调函数为完全相同的函数引用，否则无法成功移除事件监听。

以下分场景给出实现方案：

场景1：事件监听是自有代码绑定 #

绑定事件时不要直接传入匿名函数，提前将回调函数存入可访问的变量，移除时传入该变量即可，示例代码：

// 1. 预先定义/存储事件回调函数
const mouseWheelHandler = (event) => {
  // 原有鼠标滚轮事件的处理逻辑
}

let rootPageRef = document.getElementById("page");
if(rootPageRef){
  // 2. 绑定时传入存储的函数
  rootPageRef.addEventListener('mousewheel', mouseWheelHandler);

  // 3. 移除时传入同一个函数引用
  rootPageRef.removeEventListener('mousewheel', mouseWheelHandler);
}

注意：如果绑定事件时传入了第三个参数（如{capture: true}、true等配置），移除时也需要传入完全相同的第三个参数，否则也会移除失败。

场景2：无法获取绑定的回调函数引用（如第三方组件绑定的事件） #

如果拿不到当初绑定事件的函数引用，可以通过克隆节点的方式清除该元素上所有绑定的事件监听：

let rootPageRef = document.getElementById("page");
if(rootPageRef){
  // 深度克隆原节点，克隆的节点不会保留原节点绑定的事件监听器
  const clonedPage = rootPageRef.cloneNode(true);
  // 用克隆节点替换原节点
  rootPageRef.parentNode.replaceChild(clonedPage, rootPageRef);
}

额外性能优化建议 #

• 多个滚动组件不要各自单独绑定mousewheel事件，统一使用事件委托实现共用监听
• 优先使用CSS原生scroll-snap、overflow: auto等特性实现分区滚动，避免不必要的JS事件监听
• 必须用JS实现的滚动逻辑，除节流外也可以使用passive: true配置提升滚动性能：addEventListener('mousewheel', handler, {passive: true})

内容的提问来源于stack exchange，提问作者sonu kumar