可使用 AbortController 的 signal 选项统一管理多个事件监听器，调用 abort() 即自动移除所有绑定该 signal 的监听器，避免手动 removeEventListener，适用于组件卸载等场景。
可以用 addEventListener 的 signal 选项配合 AbortController，让一个控制器统一控制多个事件监听器的生命周期，实现一键取消。
signal 参数的作用
signal 是 addEventListener 第三个参数（options）中的一个可选属性，类型为 AbortSignal。当对应的 AbortController 调用 abort() 时，所有绑定该 signal 的监听器会自动被移除，无需手动调用 removeEventListener。
基本用法示例
创建一个 AbortController，把它的 signal 传给多个 addEventListener：
const controller = new AbortController();
const { signal } = controller;
// 绑定多个事件监听器，都使用同一个 signal
element.addEventListener('click', handler1, { signal });
element.addEventListener('mousemove', handler2, { signal });
window.addEventListener('resize', handler3, { signal });
// 一键取消全部
controller.abort(); // 所有上面的监听器立即失效
适用场景与注意事项
- 只对当前注册的监听器生效 ——
signal不会影响之前已注册、未传 signal 的监听器 - 不能用于
once: true的监听器 —— 因为它本就会自动移除，signal 在这里无意义 - 支持大多数事件类型（包括自定义事件），但不支持某些早期或特殊事件（如
load在<img>上可能因时机问题失效，需注意执行顺序） - 推荐在模块/组件卸载、页面跳转前统一调用
abort()，避免内存泄漏和意外触发
封装批量管理更实用
可以简单封装一个事件组管理器：
立即学习“Java免费学习笔记（深入）”；
function createEventGroup() {
const controller = new AbortController();
return {
on(target, type, listener, options = {}) {
target.addEventListener(type, listener, { ...options, signal: controller.signal });
},
destroy() {
controller.abort();
}
};
}
// 使用
const group = createEventGroup();
group.on(btn, 'click', onClick);
group.on(document, 'keydown', onKey);
group.destroy(); // 一键清理 
