正确解绑的关键是复用同一bind函数实例，因bind每次返回新函数，需先保存再统一绑定和解绑；避免循环中动态bind，推荐闭包、data属性或Map缓存；解绑前应校验监听器存在。
用 bind 预传参时，this 和参数都会被固化，但这也导致解绑时无法直接用原函数引用匹配——因为 bind 每次都返回**新函数**。所以关键不是“怎么 bind”，而是“怎么让绑定和解绑用同一个函数实例”。
预传参必须复用同一 bind 函数实例
每次调用 bind 都生成新函数，哪怕参数一样，它们也不相等（=== 为 false）。解绑时若用新 bind，就找不到对应监听器。
- ✅ 正确：先保存 bind 后的函数，绑定和解绑都用它
- ❌ 错误：绑定用
fn.bind(...)，解绑又写一遍fn.bind(...)
示例：
function handleClick(id, event) {
console.log('ID:', id, 'Target:', event.target);
}
const handler = handleClick.bind(null, 123); // 保存实例
button.addEventListener('click', handler);
// ... later
button.removeEventListener('click', handler); // ✅ 能成功解绑
避免在循环中动态 bind（易出错）
遍历元素时若在循环内反复 bind，容易误以为每次 bind 的函数可被单独解绑，其实每个都是独立新函数，且难以追踪。
立即学习“Java免费学习笔记（深入）”；
- 推荐改用闭包或
data-*属性存参，保持事件处理器唯一 - 或提前批量生成并缓存 bind 实例（如用 Map 存 ID → handler）
反例（隐患）：
items.forEach(item => {
const handler = handleClick.bind(null, item.id);
item.btn.addEventListener('click', handler);
// 这里没保存 handler，后面无法 remove
});
改进方式：
const handlers = new Map();
items.forEach(item => {
const handler = handleClick.bind(null, item.id);
handlers.set(item.id, handler);
item.btn.addEventListener('click', handler);
});
// 解绑时
handlers.forEach(handler => item.btn.removeEventListener('click', handler));
替代方案：用箭头函数 + 闭包（更直观，但注意 this）
如果不需要严格控制 this（比如 handler 里不依赖 this），箭头函数闭包更易读、无 this 困扰，且天然复用同一实例：
const handler = (id) => (event) => {
console.log('ID:', id, 'Target:', event.target);
};
const clickHandler = handler(123);
button.addEventListener('click', clickHandler);
button.removeEventListener('click', clickHandler); // ✅
⚠️ 注意：这种写法中 this 是词法作用域（通常为 undefined 或外层对象），不指向 DOM 元素；如需 this 指向元素，仍建议用 bind 或显式传 event.currentTarget。
解绑前确认监听器存在（防报错）
即使用了同一函数实例，若多次绑定或未检查是否已绑定，removeEventListener 不会报错但也不生效。可加简单防护：
- 用
WeakMap记录已绑定状态 - 或统一管理：封装
on()/off()方法，内部维护 handler 映射
简易防护示例：
const boundHandlers = new WeakMap();
function safeAdd(el, type, fn) {
const bound = fn.bind(null, 'data');
boundHandlers.set(el, { type, handler: bound });
el.addEventListener(type, bound);
}
function safeRemove(el) {
const record = boundHandlers.get(el);
if (record) {
el.removeEventListener(record.type, record.handler);
boundHandlers.delete(el);
}
} 
