addEventListener支持同一元素同一事件绑定多个监听器，按注册顺序执行且互不干扰；移除需相同函数引用；重复添加相同引用自动去重；options选项（如once、capture）影响监听器行为。
在 JavaScript 中，addEventListener 支持为同一个元素、同一个事件类型绑定多个监听函数，它们会按注册顺序依次执行，互不干扰。
同一个事件可绑定多个监听器
多次调用 addEventListener 绑定不同函数到同一事件（如 click），浏览器会把它们都存入内部监听队列：
- 每个监听器独立存在，不会覆盖前一个
- 触发事件时，所有匹配的监听函数按添加顺序同步执行
- 任一监听器中抛出未捕获错误，不影响后续监听器运行（除非使用
try/catch阻断）
示例：
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('第一监听器'));
btn.addEventListener('click', () => console.log('第二监听器'));
btn.addEventListener('click', () => console.log('第三监听器'));
// 点击后输出：第一监听器 → 第二监听器 → 第三监听器
区分监听器：靠函数引用，不是函数体
只有传入**完全相同的函数引用**，removeEventListener 才能准确移除。匿名函数每次都是新引用，无法被清除：
立即学习“Java免费学习笔记（深入）”；
- ✅ 正确做法：用具名函数或变量保存函数引用
- ❌ 错误做法：
btn.addEventListener('click', () => {...})后无法用removeEventListener移除
推荐写法：
function handleClick1() { console.log('A'); }
function handleClick2() { console.log('B'); }
btn.addEventListener('click', handleClick1);
btn.addEventListener('click', handleClick2);
// 后续可精准移除
btn.removeEventListener('click', handleClick1); // 只删 A
同一监听器重复添加不会重复生效
如果对同一个元素、同一事件、同一函数引用多次调用 addEventListener，浏览器会自动去重，只保留一份：
- 重复添加相同函数（相同引用 + 相同事件 + 相同选项）会被忽略
- 但若选项不同（如一个带
{ once: true }，另一个不带），则视为不同监听器，都会生效
利用 options 参数控制行为
第三个参数 options（对象）可细化监听逻辑，影响多个监听器的协作方式：
-
once: true—— 监听器执行一次后自动移除，适合初始化或单次操作 -
capture: true—— 在捕获阶段触发，可用于拦截事件（与冒泡阶段监听器共存） -
passive: true—— 告诉浏览器监听器不会调用preventDefault()，提升滚动等性能
注意：capture 和 once 等选项是监听器身份的一部分，选项不同即视为不同监听器，可同时存在。
