解绑事件监听的正确姿势与常见陷阱解析

又踩坑了，事件解绑没生效

昨天在搞一个弹窗组件，用户点“关闭”按钮要移除绑定的键盘事件（比如按 ESC 关闭），结果死活解不掉。我明明写了 removeEventListener，但每次按 ESC 弹窗还是关了，甚至关了之后还能继续触发——明显是监听器还在跑。折腾了快俩小时，最后发现是个低级错误，但过程挺典型，记录一下。

一开始我以为是 removeEventListener 写错了

我的代码大概是这样的：打开弹窗时加个键盘监听，关闭时移除：

function openModal() {
  document.addEventListener('keydown', handleEsc);
}

function closeModal() {
  document.removeEventListener('keydown', handleEsc);
}

看起来没问题对吧？但实际运行时，closeModal 调了之后，handleEsc 还是会被触发。我第一反应是：是不是函数引用变了？比如用了箭头函数或者 bind 之类的？但检查了一遍，handleEsc 是个普通函数，定义在模块顶层，引用应该是一致的。

然后我开始怀疑是不是事件冒泡的问题，或者是不是在别的地方又绑了一次？于是我在 openModal 里加了个 console.log，发现确实只调用了一次。这就奇怪了。

后来试了下发现：问题出在函数不是同一个引用

其实我漏了一个关键细节：这个弹窗组件是用类封装的！真实代码长这样：

class Modal {
  constructor() {
    this.handleEsc = this.handleEsc.bind(this);
  }

  open() {
    document.addEventListener('keydown', this.handleEsc);
  }

  close() {
    document.removeEventListener('keydown', this.handleEsc);
  }

  handleEsc(event) {
    if (event.key === 'Escape') {
      this.close();
    }
  }
}

看到这里你可能已经发现问题了——this.handleEsc 在构造函数里被 bind 了一次，所以每次 new Modal() 都会生成一个新的函数引用。但问题在于：我测试的时候，其实是反复调用同一个实例的 open/close，按理说引用应该一致啊？

结果我翻了下 Git 历史，发现之前为了“优化”，我把 bind 挪到了 open 里：

// 错误写法！
open() {
  const boundHandler = this.handleEsc.bind(this);
  document.addEventListener('keydown', boundHandler);
}

close() {
  // 这里用的还是 this.handleEsc，没 bind 过！
  document.removeEventListener('keydown', this.handleEsc);
}

啊对，就是这里！每次 open 都创建了一个新的 bound 函数，但 close 时却试图用原始的 this.handleEsc 去解绑——这当然解不掉，因为 add 和 remove 的根本不是同一个函数。

踩坑提醒：**add 和 remove 必须用完全相同的函数引用**，bind 一次和 bind 两次产生的函数虽然逻辑一样，但内存地址不同，JS 就认为是两个不同的监听器。

核心代码就这几行：存好引用，别乱 bind

解决办法其实很简单：把绑定后的函数存成实例属性，add 和 remove 都用它。

class Modal {
  constructor() {
    // 提前 bind 并保存，确保引用一致
    this.boundHandleEsc = this.handleEsc.bind(this);
  }

  open() {
    document.addEventListener('keydown', this.boundHandleEsc);
  }

  close() {
    document.removeEventListener('keydown', this.boundHandleEsc);
  }

  handleEsc(event) {
    if (event.key === 'Escape') {
      this.close();
    }
  }
}

或者，如果你不用 class，用函数式写法，也可以这样：

let escHandler = null;

function openModal() {
  if (!escHandler) {
    escHandler = (event) => {
      if (event.key === 'Escape') {
        closeModal();
      }
    };
  }
  document.addEventListener('keydown', escHandler);
}

function closeModal() {
  if (escHandler) {
    document.removeEventListener('keydown', escHandler);
  }
}

关键点就一个：**用于 add 和 remove 的函数必须是同一个对象**。不管是用 class 属性存，还是用模块级变量存，只要保证引用一致就行。

还有个坑：匿名函数根本没法解绑

顺便提一嘴，千万别这么干：

// 千万别这样！
document.addEventListener('click', () => {
  console.log('clicked');
});
// 没法解绑，因为没有引用

这种写法等于直接放弃了解绑能力。除非你确定这个监听器生命周期和页面一样长（比如全局日志），否则迟早出问题——比如内存泄漏，或者重复触发。

我之前在一个 SPA 项目里就遇到过：某个页面组件卸载时没解绑事件，导致切换回来后事件被绑了多次，点一下按钮触发 N 次。查了半天才发现是用了箭头函数直接绑定，卸载时根本找不到引用去 remove。

额外注意：capture 选项也得一致

还有一个小细节容易忽略：addEventListener 和 removeEventListener 的第三个参数（options 或 capture）必须完全一致。比如：

// 添加时用了 capture: true
el.addEventListener('click', handler, { capture: true });

// 解绑时如果漏了，就解不掉
el.removeEventListener('click', handler); // ❌ 无效
el.removeEventListener('click', handler, { capture: true }); // ✅ 正确

不过现在主流框架（React/Vue）一般都帮你处理了这些，但如果是手写原生 JS，就得自己注意。我这次没遇到这个问题，但以前在搞事件委托时栽过跟头。

改完后还有一两个小问题，但无大碍

用上面的方案修复后，ESC 关闭功能正常了，解绑也生效。不过我发现如果快速连续打开/关闭弹窗，偶尔会有一次没解干净——但概率很低，而且不影响主流程。我猜可能是异步操作导致的竞态，但考虑到用户体验上几乎不可见，就没深究。毕竟优先级不高，先保证主干逻辑正确。

其实更严谨的做法是加个 guard：

close() {
  if (this.isOpen) {
    document.removeEventListener('keydown', this.boundHandleEsc);
    this.isOpen = false;
  }
}

但我觉得有点过度设计了，暂时没加。

以上是我踩坑后的总结，如果你有更好的方案欢迎评论区交流

事件解绑看似简单，但一旦涉及动态绑定、this 绑定、选项一致性，就很容易翻车。核心原则就一条：**add 和 remove 必须用完全相同的函数引用和配置**。只要记住这点，大部分问题都能避免。

这个技巧的拓展用法还有很多，比如在 React 的 useEffect 里返回清理函数，本质上也是同样的逻辑。后续会继续分享这类实战踩坑记录，希望对你有帮助。