可为同一dom节点多次调用addeventlistener绑定不同事件类型或相同事件类型的多个处理函数，浏览器自动维护独立监听器列表并按序执行；支持捕获/冒泡阶段控制及通过函数引用或abortcontroller精准移除。
可以为同一个 dom 节点多次调用 addeventlistener，分别绑定不同类型的事件（比如 click、input、blur），浏览器会自动维护一个事件监听器列表，互不干扰。
绑定多个不同事件类型
这是最常见也最直接的用法：对同一元素，为不同事件各加一个监听器。
- 每个
addEventListener调用只负责一种事件类型和一个处理函数 - 事件类型由第一个参数指定（如
'click'、'keydown'） - 多个监听器可共存，触发时各自独立执行
示例：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('按钮被点击'));
btn.addEventListener('mouseenter', () => console.log('鼠标进入'));
btn.addEventListener('mouseleave', () => console.log('鼠标离开'));
同一事件类型绑定多个处理函数
你也可以为同一个事件类型（比如多个 click）绑定多个不同的回调函数，它们会按注册顺序依次执行。
- 每个
addEventListener都是独立注册，即使事件类型和目标相同 - 适合模块化开发：不同功能模块各自添加自己的监听逻辑
- 注意避免重复注册相同函数（可用第三个参数
{ once: true }或手动去重）
示例：
const input = document.getElementById('myInput');
input.addEventListener('input', handleValidation);
input.addEventListener('input', handleAutoSave);
input.addEventListener('blur', markAsTouched);
注意事件捕获与冒泡阶段
第三个参数可控制监听器在捕获还是冒泡阶段触发，默认是冒泡阶段（false 或省略）。
- 捕获阶段：从外层祖先向目标元素传播（设为
true） - 冒泡阶段：从目标元素向外层祖先传播（默认行为）
- 同一事件类型在不同阶段的监听器也会共存，但执行时机不同
示例：
btn.addEventListener('click', () => console.log('捕获阶段'), true);
btn.addEventListener('click', () => console.log('冒泡阶段'), false);
移除特定监听器的方法
如果后续需要解绑，必须使用与绑定时**完全相同的函数引用**（不能用匿名函数），或配合 AbortController。
- 命名函数或保存函数引用，才能用
removeEventListener精准移除 - 使用
{ signal }选项可批量取消（现代推荐方式）
示例（推荐信号方式）：
const controller = new AbortController();
element.addEventListener('click', handleClick, { signal: controller.signal });
element.addEventListener('scroll', handleScroll, { signal: controller.signal });
// 后续一键移除全部
controller.abort();
