javascript事件处理核心是事件流（捕获→目标→冒泡）与监听器执行时机的耦合；默认绑定在冒泡阶段，capture/once/passive/signal等选项提供精细控制；事件委托依赖冒泡和event.target，移除监听器须用相同函数引用。
JavaScript 事件处理不是“注册完就触发”那么简单，核心在于事件流（捕获→目标→冒泡）和监听器执行时机的耦合关系。不理解这个机制，event.stopPropagation() 会失效，addEventListener() 的第三个参数容易配错，动态绑定的事件也可能漏掉。
事件流分三阶段：捕获、目标、冒泡
点击一个嵌套在 <div> 里的 <code><button></button>，事件实际按顺序经过：document → body → div → button（捕获），停在 button（目标），再原路返回（冒泡）。默认所有 addEventListener() 绑定在冒泡阶段。
- 捕获阶段：从外向内，只有显式传
true才进，比如el.addEventListener('click', handler, true) - 目标阶段：事件到达绑定元素本身，此时
event.eventPhase值为2 - 冒泡阶段：从内向外，默认行为，
el.addEventListener('click', handler)或false都走这里
addEventListener 的第三个参数不只是布尔值
现代浏览器支持传入 options 对象，比单纯用 true/false 更精细：
-
{ capture: true }等价于旧写法的true -
{ once: true }表示监听器只执行一次，自动解绑，适合初始化逻辑 -
{ passive: true }告诉浏览器“我不会调preventDefault()”，可提升滚动性能（尤其移动端） -
{ signal: abortController.signal }允许外部统一取消监听，适合组件卸载场景
注意：passive: true 后再调 event.preventDefault() 不报错但无效，Chrome 控制台会警告 “Unable to preventDefault inside passive event listener”。
立即学习“Java免费学习笔记（深入）”；
事件委托靠的是冒泡 + event.target 判定
给父容器绑定一个监听器，靠 event.target 区分真正被点中的子元素，而不是给每个子元素单独绑定——这是性能关键。
- 用
event.target获取触发事件的最深节点（比如你点的是<span></span>） - 用
event.currentTarget获取当前绑定监听器的元素（比如你绑在<ul></ul>上） - 常用判断模式：
if (event.target.matches('button.delete')) { ... } - 避免用
parentNode层层向上查，改用event.target.closest('li')更健壮
移除监听器必须用完全相同的函数引用
removeEventListener 不认函数体，只认函数地址。匿名函数、箭头函数无法被精确移除：
el.addEventListener('click', () => console.log('ok'));
el.removeEventListener('click', () => console.log('ok')); // ❌ 失效，两个箭头函数是不同引用
- 正确做法：用具名函数或变量存引用：
const handler = () => {...}; add..., remove... - 或者用
{ once: true }替代手动移除 - Vue/React 等框架内部靠 Effect 清理或 ref 缓存函数，本质也是维持引用一致性
最容易被忽略的是：事件委托中动态增删 DOM 后，别以为“委托”就一劳永逸——如果新插入的元素需要不同行为，仍得靠 target 判断分支，而不是重新绑定。
