旧版IE需用attachEvent/detachEvent替代addEventListener/removeEventListener，且事件名加on前缀、handler须为同一引用；应通过特性检测判断支持性，并确保绑定解绑使用相同函数引用以防内存泄漏。
在旧版 IE（如 IE6–IE8）中，`removeEventListener` 不被支持，需使用 `detachEvent` 替代；但两者签名和事件名格式不同，直接兼容需做适配处理。
识别浏览器是否支持 addEventListener
通过特性检测判断，而非 UA 字符串，更可靠：
const supportsEventListener = !!window.addEventListener;
若为 false，则进入 IE 传统事件模型分支（`attachEvent` / `detachEvent`）。
统一事件绑定与解绑接口
封装一个兼容性函数，自动选择底层方法，并保存引用以便后续移除：
- 对现代浏览器：用 `addEventListener(type, handler, false)`，并用 `removeEventListener` 移除
- 对旧 IE：用 `attachEvent('on' + type, handler)`，注意事件名要加 on 前缀；移除时也必须用 `'on' + type` 和相同 handler 引用
- 关键点：handler 不能是匿名函数，否则 `detachEvent` 无法匹配移除；建议用命名函数或闭包缓存的引用
避免内存泄漏的关键细节
旧 IE 中未正确 `detachEvent` 会导致 DOM 节点无法回收。务必确保：
- 绑定和解绑使用**同一个函数引用**（不可用箭头函数或内联函数）
- 若 handler 需访问动态数据，可用 `bind` 或闭包包裹，但需保留引用供解绑用
- 解绑前建议检查元素是否仍存在（尤其 DOM 已被移除时调用 `detachEvent` 会报错）
简易兼容工具函数示例
以下是一个轻量级封装，兼顾可读性与实用性：
function on(el, type, handler) {
if (el.addEventListener) {
el.addEventListener(type, handler, false);
return () => el.removeEventListener(type, handler, false);
} else if (el.attachEvent) {
const wrapped = function() { handler.call(el); };
el.attachEvent('on' + type, wrapped);
return () => el.detachEvent('on' + type, wrapped);
}
}
// 使用：
const off = on(btn, 'click', handleClick);
// 后续调用 off() 即可安全移除
