如何给事件监听器回调传递自定义参数且避免移除时内存泄漏？

针对你遇到的问题——没法移除匿名箭头函数导致的内存泄漏，同时还要保留直接传递自定义参数的便捷性，这里给你两种可行的方案：

方案一：返回移除函数（轻量首选） #

直接改造addListener，让它返回一个专门的移除函数，不用额外维护映射关系：

const addListener = (callback) => {
    // 生成固定的包装函数，用于展开detail参数
    const wrapper = (e) => {
        callback(...e.detail);
    };
    // 添加事件监听
    window.addEventListener('customEventName', wrapper);
    // 返回移除函数，直接持有wrapper的引用
    return () => {
        window.removeEventListener('customEventName', wrapper);
    };
};

// 使用示例
// 添加监听并拿到移除函数
const removeMyListener = addListener((param1, param2) => {
    console.log(param1, param2); // 直接接收custom、params，不用碰e.detail
});

// 需要移除时调用
removeMyListener();

这个方案的好处是简单直接，每个监听对应独立的移除函数，不会搞混，也没有全局状态。

方案二：用映射表管理回调与包装函数（适合批量管理） #

如果需要多次添加/移除同一个回调，或者要统一管理所有监听，可以用Map存储原始回调和对应的包装函数：

// 全局映射表，存原始回调 -> 包装函数的对应关系
const callbackWrapperMap = new Map();

const addListener = (callback) => {
    // 避免重复添加同一个回调
    if (callbackWrapperMap.has(callback)) return;
    
    const wrapper = (e) => {
        callback(...e.detail);
    };
    callbackWrapperMap.set(callback, wrapper);
    window.addEventListener('customEventName', wrapper);
};

const removeListener = (callback) => {
    const wrapper = callbackWrapperMap.get(callback);
    if (wrapper) {
        window.removeEventListener('customEventName', wrapper);
        callbackWrapperMap.delete(callback);
    }
};

// 使用示例
const myCallback = (param1, param2) => {
    console.log(param1, param2);
};

// 添加监听
addListener(myCallback);

// 移除监听
removeListener(myCallback);

两种方案都能解决内存泄漏问题，同时让你的回调直接拿到展开后的自定义参数，不用再写繁琐的e.detail[0]这类代码。

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