JavaScript中removeEventListener无法移除事件监听器问题求助

问题根源 #

你代码里的问题很明确：添加和移除监听器时用的是两个完全独立的匿名箭头函数。addEventListener会把传入的函数引用存起来，而removeEventListener需要完全匹配这个引用才能生效——匿名函数每次创建都是新的内存对象，所以移除操作根本找不到对应的监听器。

解决办法 #

方法1：保存函数引用 #

把事件处理函数赋值给一个变量，添加和移除都用这个变量：

// 提前定义好处理函数，保存引用
const headerKeyDownHandler = (evt) => onHeaderKeyDown(parentElement, columnApi, evt);

// 添加监听器
headerElement.addEventListener('keydown', headerKeyDownHandler);

// 移除监听器（用同一个引用）
headerElement.removeEventListener('keydown', headerKeyDownHandler);

方法2：使用bind绑定参数 #

如果更习惯用bind来固定参数，同样要保存bind返回的函数引用：

// bind会返回新函数，必须保存这个引用
const headerKeyDownHandler = onHeaderKeyDown.bind(null, parentElement, columnApi);

headerElement.addEventListener('keydown', headerKeyDownHandler);
headerElement.removeEventListener('keydown', headerKeyDownHandler);

注意：不能在add和remove里分别调用bind，那样会生成两个不同的函数引用，一样无法移除。

额外注意事项 #

• 确保移除时的事件类型（keydown）和添加时完全一致，大小写也不能错。
• 确认执行移除操作时，headerElement还是原来的DOM元素，没有被重新渲染或替换成新的DOM节点。

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