无法调用removeEventListener移除事件监听器的技术问题求助

我懂你这个痛点！每次用bind(this)之后，因为每次返回的都是新函数引用，直接存原回调的话，移除时根本找不到对应的监听，确实头疼。而且你还不想大改现有代码、保持原来的调用方式，那下面这两个方案绝对适合你：

方案1：保存绑定后的函数引用（最直观的修改） #

核心思路就是：每次添加事件时，把bind后的函数引用存到你的存储结构里，而不是只存原回调。这样移除时直接用这个保存的引用去解绑，就不会出现找不到的问题了。

假设你原来的代码框架大概是这样，修改后可以变成：

// 用来存储每个元素对应的事件监听（元素 -> { 事件类型: 绑定后的回调 }）
const eventStore = new Map();

// 保持你原来的调用方式不变
function addEv(element, type, callback) {
  // 绑定你需要的this上下文，这里假设是当前函数的this，你可以根据实际情况调整
  const boundCallback = callback.bind(this);
  
  // 初始化存储结构
  if (!eventStore.has(element)) {
    eventStore.set(element, new Map());
  }
  const elementEvents = eventStore.get(element);
  
  // 绑定事件并存下引用
  element.addEventListener(type, boundCallback);
  elementEvents.set(type, boundCallback);
}

// 移除事件的函数，调用方式也和你原来的一致
function removeEv(element, type) {
  const elementEvents = eventStore.get(element);
  if (!elementEvents) return;
  
  const boundCallback = elementEvents.get(type);
  if (boundCallback) {
    // 用保存的绑定后引用解绑
    element.removeEventListener(type, boundCallback);
    elementEvents.delete(type);
    
    // 清理空的存储条目，避免内存浪费
    if (elementEvents.size === 0) {
      eventStore.delete(element);
    }
  }
}

这个方案几乎不用改动外部调用逻辑，只是内部多了一步存储绑定后函数的操作，完全符合你的需求。

方案2：用handleEvent接口（更优雅的方式） #

如果你觉得存绑定后的函数有点繁琐，可以试试浏览器原生支持的handleEvent接口。这个接口允许你把一个对象作为事件监听函数传入，浏览器会在事件触发时自动调用该对象的handleEvent方法。

好处是：add和remove用的是同一个对象引用，完全不用担心bind导致的引用丢失问题，而且同样能保持你的调用方式不变：

const eventStore = new Map();

function addEv(element, type, callback) {
  // 创建一个实现handleEvent的包装对象
  const eventHandler = {
    handleEvent(event) {
      // 这里可以自定义回调的this指向，比如绑定你需要的上下文
      callback.call(this, event);
      // 如果需要固定this，也可以写成 callback.bind(你的目标this)(event)
    }
  };
  
  // 初始化存储结构
  if (!eventStore.has(element)) {
    eventStore.set(element, new Map());
  }
  const elementEvents = eventStore.get(element);
  
  // 添加监听并存下handler对象
  element.addEventListener(type, eventHandler);
  elementEvents.set(type, eventHandler);
}

function removeEv(element, type) {
  const elementEvents = eventStore.get(element);
  if (!elementEvents) return;
  
  const eventHandler = elementEvents.get(type);
  if (eventHandler) {
    // 直接用保存的handler对象解绑
    element.removeEventListener(type, eventHandler);
    elementEvents.delete(type);
    
    if (elementEvents.size === 0) {
      eventStore.delete(element);
    }
  }
}

这个方案的代码更优雅，而且不需要处理bind后的函数引用问题，本质上是用对象代替了函数引用，浏览器会帮你处理事件触发时的调用逻辑。

进阶：支持同一元素同一类型多个回调 #

如果你的场景需要给同一个元素的同一个事件类型绑定多个回调，只需要把存储结构改成数组，同时保存原回调和绑定后的引用（或handler对象），这样移除时可以根据原回调找到对应的监听：

const eventStore = new Map();

function addEv(element, type, callback) {
  const boundCallback = callback.bind(this);
  
  if (!eventStore.has(element)) {
    eventStore.set(element, new Map());
  }
  const elementEvents = eventStore.get(element);
  
  if (!elementEvents.has(type)) {
    elementEvents.set(type, []);
  }
  const callbackList = elementEvents.get(type);
  
  // 存储原回调和绑定后的引用的对应关系
  callbackList.push({ original: callback, bound: boundCallback });
  element.addEventListener(type, boundCallback);
}

function removeEv(element, type, callback) {
  const elementEvents = eventStore.get(element);
  if (!elementEvents) return;
  
  const callbackList = elementEvents.get(type);
  if (!callbackList) return;
  
  // 找到原回调对应的绑定后引用
  const targetIndex = callbackList.findIndex(item => item.original === callback);
  if (targetIndex === -1) return;
  
  const { bound } = callbackList[targetIndex];
  element.removeEventListener(type, bound);
  callbackList.splice(targetIndex, 1);
  
  if (callbackList.length === 0) {
    elementEvents.delete(type);
  }
  if (elementEvents.size === 0) {
    eventStore.delete(element);
  }
}

这个版本的removeEv需要传入原回调，但调用逻辑还是和原生的removeEventListener一致，完全符合你的使用习惯。

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