JavaScript中event listener重复添加引发性能问题的解决方案求助

我现在遇到个头疼的问题——我的JavaScript代码里事件监听器被重复添加了好几次，导致应用越来越卡。

问题详情 #

我要给所有带.ag-header-cell-resize类的元素添加dblclick事件监听器，但每次组件更新或者页面重新渲染时，这个事件监听器就会重复绑定，而不是只绑一次。我目前的代码是这样的：

const resizeElements = document.querySelectorAll('.ag-header-cell-resize');

resizeElements.forEach((element) => {
    element.addEventListener('dblclick', (event) => {
        const parentHeaderCell = event.target?.closest('.ag-header-cell');
        if (parentHeaderCell) {
            const colId = parentHeaderCell.getAttribute('col-id');
            console.log('Column ID:', colId);

            const column = updateColumnWidth(tableColumns, colId);
            setTableColumns(column);
        }
    });
});

每次组件更新或者页面重渲染，新的监听器就会被加上，应用运行起来越来越慢。

我尝试过的解决方案 #

我已经试了几种办法，但都没解决问题：

• 使用{ once: true }选项添加监听器：

  element.addEventListener('dblclick', eventHandler, { once: true });
  

  → 结果是每个元素只能触发一次事件，但我需要用户每次双击都能生效，不能只触发一次就失效了。

• 添加前先移除监听器：
  → 这个方法没用，因为每次创建的事件处理函数引用都是不同的，根本无法移除旧的监听器。

• 在React中使用useEffect（我用的是React框架）：

  useEffect(() => {
    const resizeElements = document.querySelectorAll('.ag-header-cell-resize');
  
    resizeElements.forEach((element) => {
      element.addEventListener('dblclick', handleResize);
    });
  
    return () => {
      resizeElements.forEach((element) => {
        element.removeEventListener('dblclick', handleResize);
      });
    };
  }, []);
  
  // 之前试过的移除再添加的写法
  element.removeEventListener('dblclick', eventHandler);
  element.addEventListener('dblclick', eventHandler);
  

  → 就算加上了清理函数，监听器还是会重复绑定。

需要求助的问题 #

我现在需要大家帮忙解决的是：

• 怎么才能确保每个元素只绑定一次这个事件监听器，不会重复添加？
• 在JavaScript或者React里，有没有更好的方法来处理这类事件？

备注：内容来源于stack exchange，提问作者Mohit Rakh