div单击里面的按钮section，JavaScript 突然需要做出选择：哪个元素应该首先处理该事件？
事件在到达目标之前和之后穿过 DOM 层的过程被称为事件传播。如果您正在编写现代 JavaScript，那么理解这一流程是必不可少的。这正是“正常工作”的代码与简洁、可预测且易于扩展的代码之间的区别。
让我们来看一下。
什么是事件传播？ 每次你点击、按下按键或与 DOM 交互时，事件并不仅仅“发生”在你触摸的元素上。相反，它会按照明确定义的顺序沿着 DOM 树的路径进行。
传播分为三个阶段：
捕获阶段（事件捕获） 事件从顶部开始（document→→→ …… html）body并向下传播，直到到达目标。
目标阶段 事件发生在您与之交互的实际元素上（例如按钮或链接）。
冒泡阶段（事件冒泡） 然后，事件从目标向上传播，通过其祖先，直到返回树的顶部。
以下是整个旅程的视觉展示：
事件传播生命周期
在此图中：
中间的直箭头表示捕获阶段，其中事件从 DOM 顶部（document、html、body、section、p）向下传播到实际目标元素（a）。 元素周围的黄色框显示目标阶段，即事件到达被点击元素本身的点。 右侧的弯曲红色箭头代表冒泡阶段，其中事件通过目标的祖先向上移动（p→→→→ ）section。bodyhtmldocument 事件冒泡 JavaScript 中的大多数事件默认会冒泡。这意味着事件首先在目标元素上触发，然后再向上传递到其祖先元素。
示例：冒泡操作
如果您点击该按钮：
按钮记录：“按钮被点击”。 然后父级记录：“Parent Div clicked”。 这就是冒泡行为：事件从子级冒泡到其父级。
事件捕获 捕获是相反的方向：事件在到达目标之前就被“捕获”。
要在捕获阶段进行监听，请将第三个参数（true）传递给addEventListener。
示例：实际捕获
单击该按钮将产生以下效果：
“Parent Div 捕获了点击”（在下降过程中捕获）。 “点击按钮”（目标阶段）。 停止传播 有时您不希望事件继续传播，例如当模式的背景可点击时，但如果点击发生在模式本身内部，您也不希望通过点击关闭模式。
JavaScript 为您提供了两种工具：
event.stopPropagation()→ 停止在 DOM 树上进一步向上或向下移动。 event.stopImmediatePropagation()→ 执行相同的操作，但也阻止触发同一元素上的其他处理程序。 例子 child.addEventListener("click", (event) => { console.log("Button clicked"); event.stopPropagation(); // Parent won’t log anything }); 这为什么重要？ 这不仅仅是学术细节，而且具有实用性。
事件委托li：无需为列表中的每个元素添加点击监听器，只需为每个元素添加一个监听器trx租赁，并通过冒泡通知您哪个元素li被点击。这样可以节省内存并简化代码。 全局拦截：捕获可让您在事件到达目标之前拦截它们，这对于记录、阻止某些操作或构建框架很有用。 更清晰的模态框和下拉菜单：控制传播可防止意外点击关闭 UI 组件。 传播是您在网络上使用的几乎所有高级 UI 模式的支柱。
回顾 事件流程分为三个阶段：捕获 → 目标 → 冒泡。 除非您明确使用捕获，否则浏览器默认为冒泡。 使用trueinaddEventListener在捕获阶段进行监听。 stopPropagation()当您想要包含事件时使用。 结束语 每次点击按钮，JavaScript 不仅仅是运行你的处理程序，它还会将事件遍历 DOM，就像快递员在送货路线上停下来一样。掌握事件冒泡和捕获意味着你不仅仅是在对点击做出反应，而是在掌控整个旅程本身。
一旦你将其内化，事件委托、模式和复杂的 UI 交互等功能就不再感觉像是黑客，而开始感觉像是 DOM 自然流的扩展。查看更多www.mxwd.cc
