javascript支持同一元素同一事件绑定多个addeventlistener监听器，按注册顺序执行；需用命名函数或options（如once）才能精准移除；避免重复绑定可先remove再add或用once；捕获阶段监听器（capture: true）优先于冒泡阶段执行。
JavaScript 中用 addEventListener 绑定多个事件监听器非常简单，浏览器原生支持同一元素、同一事件类型绑定多个处理函数，它们会按注册顺序依次执行，互不影响。
同一事件可绑定多个监听器
一个元素的同一个事件（比如 click）可以调用多次 addEventListener，每次传入不同的回调函数，所有回调都会被触发：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('第一句'));
btn.addEventListener('click', () => console.log('第二句'));
btn.addEventListener('click', () => console.log('第三句'));
// 点击后输出：第一句 → 第二句 → 第三句
区分监听器：用命名函数或 options 参数
如果后续需要移除某个监听器，必须使用**相同的函数引用**或配合 options（如 once、capture）来精准控制：
- 推荐使用命名函数，便于
removeEventListener移除 - 匿名函数每次都是新引用，无法被移除
- 若用了
{ once: true }，监听器执行一次后自动注销
function handler1() { console.log('只执行一次'); }
function handler2() { console.log('可手动移除'); }
btn.addEventListener('click', handler1, { once: true });
btn.addEventListener('click', handler2);
// 后续可移除 handler2
btn.removeEventListener('click', handler2);
避免重复绑定的常见做法
在动态操作（如重绘、反复初始化）中，重复调用 addEventListener 可能导致监听器堆积。安全做法包括：
- 绑定前先清理（适合已知函数名的场景）
- 用标志位记录是否已绑定（适用于模块初始化逻辑）
- 利用事件委托，在父级统一对一类子元素监听，减少直接绑定数量
// 示例：安全绑定（先解绑再绑）
btn.removeEventListener('click', handleClick);
btn.addEventListener('click', handleClick);
// 或封装成工具函数
function onOnce(el, event, fn) {
el.addEventListener(event, fn, { once: true });
}
注意事件流阶段与捕获/冒泡
多个监听器默认在**冒泡阶段**执行。若需在捕获阶段运行，传入第三个参数 true 或 { capture: true }：
- 捕获阶段监听器先于冒泡阶段执行
- 同一阶段内，按注册顺序执行
- 捕获和冒泡阶段的监听器是独立的，可共存
btn.addEventListener('click', () => console.log('冒泡1'), false);
btn.addEventListener('click', () => console.log('捕获1'), true);
btn.addEventListener('click', () => console.log('冒泡2'), false);
// 点击时输出：捕获1 → 冒泡1 → 冒泡2
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
