柯里化通过生成可复用的函数引用，确保 addEventListener 与 removeEventListener 使用同一函数实例，从而解决匿名函数移除失败问题；需避免箭头函数，优先使用具名函数或柯里化工厂返回的稳定引用。
在 DOM 事件监听中实现通用移除逻辑时，柯里化本身不直接“移除”事件，而是帮你构造出可复用、带预置参数的监听函数，从而让 removeEventListener 能精准匹配到当初添加的那个函数——这是关键。
为什么直接传匿名函数会导致移除失败
常见错误写法：
btn.addEventListener('click', function() { console.log('hello'); });
btn.removeEventListener('click', function() { console.log('hello'); }); // ❌ 不生效
两次传入的是两个不同的函数对象，即使内容一样，removeEventListener 也无法识别为同一个监听器。必须使用**同一个函数引用**。
用柯里化生成可复用的监听器函数
柯里化把多参数函数拆成一系列单参数函数，让你能提前固化部分参数（比如事件类型、目标元素、业务逻辑），最终返回一个可被反复引用的函数。
立即学习“Java免费学习笔记（深入）”；
例如，封装一个支持「自动绑定 this + 预置数据 + 可移除」的柯里化监听器工厂：
const createHandler = (fn, ...presetArgs) => {
const handler = function(e) {
fn.call(this, e, ...presetArgs);
};
return handler;
};
// 使用
const handleClick = createHandler((e, msg, id) => {
console.log(msg, 'clicked on', id, e.target);
}, 'Button:', 'submit-btn');
btn.addEventListener('click', handleClick);
// 后续可精确移除
btn.removeEventListener('click', handleClick); // ✅ 成功
更实用的柯里化事件管理器（支持命名空间/自动清理）
实际项目中建议封装一层轻量管理器，避免手动记函数引用：
class EventManager {
constructor() {
this.handlers = new WeakMap();
}
on(el, type, fn, ...args) {
const boundFn = fn.bind(el, ...args);
// 柯里化：把 el+type+boundFn 组合成唯一 key
const key = `${el.tagName}_${type}_${fn.toString().slice(0, 30)}`;
if (!this.handlers.has(el)) this.handlers.set(el, new Map());
const map = this.handlers.get(el);
map.set(key, boundFn);
el.addEventListener(type, boundFn);
return () => el.removeEventListener(type, boundFn);
}
// 或提供批量移除方法
off(el, type, fn) {
const map = this.handlers.get(el);
if (!map) return;
for (const [key, handler] of map) {
if (key.includes(type) && handler === fn) {
el.removeEventListener(type, handler);
map.delete(key);
break;
}
}
}
}
// 使用
const em = new EventManager();
const remove = em.on(btn, 'click', (e, prefix) => {
console.log(prefix, e.target.textContent);
}, '【点击了】');
// 需要时调用
remove(); // ✅ 精准解绑
注意点：箭头函数不能用作事件监听器并移除
箭头函数没有自己的 this，且无法被柯里化后稳定复用（每次调用都新建实例）。以下写法不可靠：
-
❌
btn.addEventListener('click', (e) => handler(e, 'data'))→ 移除时无法复用同一引用 - ✅ 必须用具名函数、函数表达式变量、或柯里化返回的稳定函数引用
