JavaScript事件监听关键在第三个参数（捕获/冒泡）、事件流阶段及监听器可移除性；布尔值false为默认冒泡，需拦截时用true捕获；removeEventListener需同一函数引用；target是触发元素，currentTarget是绑定元素。
JavaScript 的事件监听机制不是“绑上就完事”，关键在 addEventListener 的第三个参数、事件流阶段、以及监听器是否可被移除——这三个点没理清，90% 的事件问题都出在这儿。
为什么 addEventListener 的第三个参数不能总写 false
这个布尔值决定监听器注册在捕获阶段（true）还是冒泡阶段（false，默认）。多数人从不改它，但遇到以下场景必须调整：
- 想在父元素拦截子元素的事件（比如阻止表单内按钮触发外层弹窗关闭），得用捕获：
el.addEventListener('click', handler, true) -
event.stopPropagation()在捕获阶段调用，无法阻止同阶段其他捕获监听器，只影响后续冒泡阶段 - 现代 API 如
once: true或passive: true是对象形式，和布尔参数互斥，必须写成：el.addEventListener('touchstart', handler, { passive: true })
removeEventListener 失效？大概率是函数引用不对
监听器必须用**同一个函数引用**才能成功移除。匿名函数、箭头函数、每次调用都新建的函数，都会导致 removeEventListener 无效：
el.addEventListener('click', function() { console.log('hi'); });
el.removeEventListener('click', function() { console.log('hi'); }); // ❌ 不生效：两个函数是不同引用
正确做法：
立即学习“Java免费学习笔记（深入）”；
- 把处理函数声明为具名函数或变量：
const handler = () => {...}; el.addEventListener('click', handler); el.removeEventListener('click', handler); - 使用
once: true选项自动清理，适合只执行一次的逻辑 - 用事件委托时，别在循环里反复
addEventListener，应绑定到父级并判断event.target
事件对象的 currentTarget 和 target 总混淆？看触发路径
target 是事件真正发生的那个元素（比如你点的是按钮内的 <span>）；currentTarget 是当前监听器绑定的那个元素（比如监听器绑在 <div> 上）：
document.querySelector('div').addEventListener('click', e => {
console.log(e.target); // 可能是 div 里的 span、i 或 button
console.log(e.currentTarget); // 一定是那个 div
});
这个区别在事件委托中至关重要——你要操作的是点击的具体子元素，就得用 e.target，而不是 e.currentTarget。
事件监听不是语法对了就稳了；capture 阶段选错、函数引用丢失、target 和 currentTarget 混用，这三个地方一动就出连锁反应。尤其在复杂组件嵌套或移动端 touch 事件中，漏掉任意一个细节，调试时间翻倍。
