原生JavaScript移除绑定对象方法的事件监听器失败问题求助

移除失败原因 #

• removeEventListener仅当传入的回调函数引用、事件类型、捕获配置三个参数和addEventListener绑定时的参数完全一致时，才能成功移除事件。你两次传入的匿名函数虽然代码结构一致，但属于不同的函数引用，无法匹配到已绑定的事件。
• 你在另一个模块中重新生成的LoadSite实例和绑定时使用的实例是完全独立的对象，进一步导致回调无法匹配。

正确实现方案 #

方案1：模块化导出回调（推荐） #

在main.js中对回调函数命名并导出：

// main.js 代码修改
import { LoadSite } from './classes/LoadSite.js';
// 导出绑定时使用的实例和回调
export const loadSite = new LoadSite(
  'js/options.js',
  'pages/options.html',
  containerMain,
  'options-wrapper'
);
export function handleOptionsClick() {
  loadSite.loadSite();
}
const options = document.querySelector('.options');
options.addEventListener('click', handleOptionsClick, false);

在需要移除事件的模块中导入对应回调即可：

// 其他模块代码
import { handleOptionsClick } from './main.js';
const options = document.querySelector('.options');
// 第三个参数和绑定时保持一致传入false
options.removeEventListener('click', handleOptionsClick, false);

方案2：挂载回调到DOM元素（适合跨模块无需导出的场景） #

在main.js中将回调挂载到绑定事件的DOM元素自定义属性上：

// main.js 代码修改
const loadSite = new LoadSite(
  'js/options.js',
  'pages/options.html',
  containerMain,
  'options-wrapper'
);
const options = document.querySelector('.options');
// 自定义属性挂载回调，避免额外的模块导出
options._handleOptionsClick = function () {
  loadSite.loadSite();
};
options.addEventListener('click', options._handleOptionsClick, false);

在其他模块直接读取DOM元素上的回调进行移除：

// 其他模块代码
const options = document.querySelector('.options');
if (options?._handleOptionsClick) {
  options.removeEventListener('click', options._handleOptionsClick, false);
  // 移除事件后清理自定义属性
  delete options._handleOptionsClick;
}

注意事项 #

• 不要使用匿名函数作为需要后续移除的事件回调，匿名函数没有可访问的引用，无法单独移除，只能通过重写元素HTML等极端方式清除所有事件，会影响其他功能。
• removeEventListener的第三个捕获/冒泡配置必须和绑定时传入的参数完全一致，否则也会移除失败。

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