如何在带多参数的类方法中移除EventListener？

你遇到的问题核心有两个：

1. bind每次调用都会生成新函数：你在showDeleteDialog里执行this._handleEvent = this.hideDeleteDialog.bind(this, event, dialog)，每次执行bind都会返回一个全新的函数引用——哪怕逻辑完全一致，也不是同一个函数。
2. 实例变量被覆盖：如果用户连续点击多个删除按钮，this._handleEvent会被新的函数覆盖，之前添加到document上的旧事件监听器就找不到对应的引用，自然无法移除。

就算只点击一次，看起来移除时用的是同一个_handleEvent，但如果后续再触发showDeleteDialog，旧的监听器会留在document上，因为新的_handleEvent已经替换了旧的引用，旧监听器永远无法被移除，最终造成事件堆积。

推荐用给每个dialog单独存储对应事件处理函数的方式，避免实例变量被覆盖，下面是两种具体修改方式：

方案一：内联处理逻辑并绑定到dialog元素 #

class CommentsBlock {
  constructor(container) {
    this._comments = container.querySelectorAll('[data-selector="comment"]');

    this._comments.forEach((comment) => {
      const deleteButton = comment.querySelector('[data-selector="delete-icon"]');
      deleteButton.addEventListener('click', (event) => this.showDeleteDialog(event));
    });
  }

  showDeleteDialog(event) {
    event.stopPropagation();

    const comment = event.target.closest('[data-selector="comment"]');
    const dialog = comment.querySelector('[data-selector="dialog"]');

    // 先移除该dialog可能存在的旧监听器，避免重复绑定
    if (dialog._clickOutsideHandler) {
      document.removeEventListener('click', dialog._clickOutsideHandler);
    }

    // 创建当前dialog对应的点击处理函数
    const handleClickOutside = (e) => {
      if (!dialog.contains(e.target)) {
        hide(dialog);
        // 移除监听器并清理元素上的属性
        document.removeEventListener('click', handleClickOutside);
        delete dialog._clickOutsideHandler;
      }
    };
    // 把处理函数绑定到dialog元素上
    dialog._clickOutsideHandler = handleClickOutside;

    // 显示当前dialog，原代码的confirmDeleteDialog应为笔误
    if (dialog) {
      show(dialog);
      document.addEventListener('click', handleClickOutside);
    }
  }
}

方案二：用Map存储dialog与处理函数的映射 #

如果想保留单独的hideDeleteDialog方法，可以用实例的Map来存储每个dialog对应的处理函数：

class CommentsBlock {
  constructor(container) {
    this._dialogHandlers = new Map(); // 存储dialog到处理函数的映射
    this._comments = container.querySelectorAll('[data-selector="comment"]');

    this._comments.forEach((comment) => {
      const deleteButton = comment.querySelector('[data-selector="delete-icon"]');
      deleteButton.addEventListener('click', (event) => this.showDeleteDialog(event));
    });
  }

  showDeleteDialog(event) {
    event.stopPropagation();

    const comment = event.target.closest('[data-selector="comment"]');
    const dialog = comment.querySelector('[data-selector="dialog"]');

    // 清理该dialog的旧监听器
    if (this._dialogHandlers.has(dialog)) {
      document.removeEventListener('click', this._dialogHandlers.get(dialog));
      this._dialogHandlers.delete(dialog);
    }

    // 创建绑定好的处理函数并存入Map
    const handleEvent = this.hideDeleteDialog.bind(this, dialog);
    this._dialogHandlers.set(dialog, handleEvent);

    if (dialog) {
      show(dialog);
      document.addEventListener('click', handleEvent);
    }
  }

  hideDeleteDialog(dialog, event) {
    if (!dialog.contains(event.target)) {
      hide(dialog);
      // 从Map中取出对应函数并移除监听器
      document.removeEventListener('click', this._dialogHandlers.get(dialog));
      this._dialogHandlers.delete(dialog);
    }
  }
}

• 永远不要用实例变量存储会被多次赋值的事件处理函数，尤其是涉及到bind的场景，因为bind每次都会生成新函数。
• 添加事件监听器前，最好先检查并移除该元素对应的旧监听器，避免重复绑定导致事件多次触发。

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