AbortSignal 本身不直接管理事件监听器，但通过 addEventListener 的 signal 选项配合同一 AbortController 实例，可实现一键取消多个监听器；需确保浏览器支持（Chrome 88+ 等），且所有监听器共享同一 signal，调用 controller.abort() 即全部失效。
AbortSignal 本身不直接管理事件监听器，但它可以与 addEventListener 的 signal 选项配合，实现“一键取消”多个绑定的监听器——前提是这些监听器都使用了同一个 AbortController 实例的 signal。
确保浏览器支持并创建统一的 AbortController
现代浏览器（Chrome 88+、Firefox 96+、Safari 17.4+）已支持 addEventListener 的 { signal } 选项。关键在于：所有需要批量取消的监听器，必须共享同一个 AbortController 实例的 signal，而不是各自新建。
- ✅ 正确做法：一个控制器，多个监听器
- ❌ 错误做法：每个
addEventListener都 new 一个AbortController
为多个元素/事件绑定带 signal 的监听器
你可以对多个 DOM 元素、同一元素的多个事件类型，或不同阶段的监听器（如捕获/冒泡），全部传入同一个 signal。一旦调用 controller.abort()，所有关联监听器自动被移除。
示例：
const controller = new AbortController();
const { signal } = controller;
// 绑定多个监听器，全部使用同一 signal
document.getElementById('btn1').addEventListener('click', handler1, { signal });
document.getElementById('btn2').addEventListener('click', handler2, { signal });
document.querySelector('.form').addEventListener('submit', handleSubmit, { signal });
window.addEventListener('resize', handleResize, { signal, capture: true });
// 一行代码取消全部
controller.abort(); // ✅ handler1, handler2, handleSubmit, handleResize 全部失效
注意：signal 只影响本次 addEventListener 调用
signal 是一次性绑定机制，它不会追溯已存在的监听器，也不会影响后续新绑定的监听器（除非也显式传入同一 signal）。因此：
- 动态添加的新监听器，若未传 signal 或用了别的 signal，不受本次
abort()影响 - 同一个监听器函数多次绑定（如重复调用
addEventListener），只要每次传的都是这个 signal，它们都会被一并取消 - 监听器内无法通过
event.target.removeEventListener手动清理 —— signal 的取消是外部驱动、不可逆的
进阶：封装批量监听工具函数
可封装一个辅助函数，简化多目标监听 + 统一信号管理：
function addEventListeners(targets, type, handler, options = {}) {
const controller = new AbortController();
const { signal } = controller;
targets.forEach(target => {
target.addEventListener(type, handler, { ...options, signal });
});
return () => controller.abort(); // 返回取消函数
}
// 使用
const dispose = addEventListeners(
[btn1, btn2, form],
'click',
onClick,
{ once: true }
);
// 后续随时调用 dispose() 即可批量取消
