addEventListener 不支持直接传入多个回调函数，但可通过多次调用为同一事件绑定多个监听器，按注册顺序依次执行；可混用匿名与具名函数，具名函数便于精准移除；执行顺序遵循注册顺序及事件流阶段（捕获→目标→冒泡）；推荐使用 once 或 AbortSignal 避免内存泄漏。
在 JavaScript 中，addEventListener 本身不支持直接传入多个回调函数，但你可以通过多次调用它，为同一个事件绑定多个独立的监听器——它们会按注册顺序依次执行。
一个元素上绑定多个相同事件的监听器
这是最常用的方式：对同一个元素、同一个事件类型（如 click），反复调用 addEventListener，每次传入不同的处理函数。浏览器会把它们存入内部监听队列，触发时逐一调用。
例如：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('第一件事'));
btn.addEventListener('click', () => console.log('第二件事'));
btn.addEventListener('click', () => console.log('第三件事'));
// 点击按钮后，控制台依次输出三句话
使用匿名函数和具名函数混合绑定
你可以混用匿名函数和已定义的具名函数，便于后续移除特定监听器（因为 removeEventListener 要求传入**完全相同的函数引用**）。
立即学习“Java免费学习笔记（深入）”；
- 具名函数可以被精准移除
- 匿名函数无法被单独移除（除非提前保存引用）
- 推荐给需要动态启停的逻辑使用具名函数
示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function handleSave() { console.log('保存操作'); }
function handleLog() { console.log('记录日志'); }
btn.addEventListener('click', handleSave);
btn.addEventListener('click', handleLog);
btn.addEventListener('click', function () { console.log('临时提示'); });
// 后续可移除指定监听器
btn.removeEventListener('click', handleLog); // ✅ 成功移除
注意事件冒泡与监听器执行顺序
多个监听器的执行顺序遵循两个原则：
- 按
addEventListener的调用顺序（先注册，先执行） - 若涉及父级和子级元素，还要考虑事件流阶段（捕获 → 目标 → 冒泡），默认是冒泡阶段
- 可通过第三个参数
{ capture: true }切换到捕获阶段，影响执行时机
例如：
document.body.addEventListener('click', () => console.log('body 捕获'), true);
btn.addEventListener('click', () => console.log('btn 目标'));
document.body.addEventListener('click', () => console.log('body 冒泡'));
// 点击 btn 时输出顺序：body 捕获 → btn 目标 → body 冒泡
避免重复绑定和内存泄漏的小技巧
频繁绑定又不清理，容易造成监听器堆积。实用建议：
- 用
once: true选项让监听器只执行一次，自动解绑 - 用
signal（AbortSignal）配合addEventListener实现统一取消 - 组件销毁前，记得手动调用
removeEventListener（尤其在单页应用中）
示例（一次性监听）：
btn.addEventListener('click', () => {
console.log('只响应第一次点击');
}, { once: true });
示例（用 AbortController 控制）：
const controller = new AbortController();
btn.addEventListener('click', () => console.log('受控监听'), { signal: controller.signal });
// 后续随时终止所有关联监听器
controller.abort(); // 所有带该 signal 的监听器自动移除
