事件流包含捕获、目标和冒泡三个阶段，事件从window开始向下传播至目标元素再向上冒泡；2. 可通过addEventListener的第三个参数指定在捕获或冒泡阶段监听事件；3. 使用event.stopPropagation()阻止事件传播，stopImmediatePropagation() additionally阻止同元素其他监听器执行；4. 事件委托利用冒泡机制将事件绑定到父元素处理子元素事件，减少内存占用并支持动态添加的元素；5. 需通过e.target准确判断事件源，并注意并非所有事件都冒泡，如focus、blur需用focusin/focusout替代。掌握这些机制可提升代码性能与维护性。
在 JavaScript 中，DOM 事件是用户与网页交互的核心机制。理解事件流和事件委托，有助于写出更高效、可维护的事件处理代码。
事件流：事件的传播过程
当用户触发一个 DOM 事件（如点击按钮），该事件并不会只作用于目标元素，而是在 DOM 树中经历三个阶段的传播过程：
- 捕获阶段（Capture Phase）：事件从 window 开始，逐级向下传递，经过 document、html、body，直到目标元素的父节点为止。这个阶段主要用于监听外层元素对内部事件的预处理。
- 目标阶段（Target Phase）：事件到达绑定事件的目标元素本身，此时事件被真正触发。
- 冒泡阶段（Bubbling Phase）：事件从目标元素开始，逐级向上传播回 window，路径与捕获相反。大多数事件默认在此阶段被处理。
可以通过 addEventListener 的第三个参数控制事件监听的阶段：
element.addEventListener('click', handler, true); // 捕获阶段监听element.addEventListener('click', handler, false); // 冒泡阶段监听（默认）
阻止事件传播
有时不希望事件继续传播，可以使用以下方法：
立即学习“Java免费学习笔记（深入）”；
- event.stopPropagation()：阻止事件继续在 DOM 树中传播，但不影响当前元素其他监听器的执行。
- event.stopImmediatePropagation()：除了阻止传播，还阻止当前元素上其他同类型事件监听器的执行。
例如，点击子元素时，如果不希望触发父级的 click 事件，可在子元素事件处理器中调用 stopPropagation。
新思创OA办公自动化系统增强版
下载
中国最实用的办公自动化系统，全面提升单位的工作效率和质量，整合企业资源，规范办公流程，加快信息流通，提高办公效率，降低办公成本，通过提高执行力来完善管理，从而提升企业竞争力 含公告通知、文件传送、电子通讯薄、日程安排、工作日记、工作计划、个人（公共）文件柜、网上申请和审批、电子邮件、手机短信、个人考勤、知识管理、人事管理、车辆管理、会议管理、印信管理、网上填报、规章制度、论坛、网络会议、语音聊天、
事件委托：利用事件冒泡优化性能
事件委托是一种利用事件冒泡机制，将事件监听器绑定到父元素来处理子元素事件的技术。它特别适用于动态内容或大量子元素的场景。
比如有一个无序列表 ul，包含多个 li 项，未来可能动态添加新的 li。如果为每个 li 单独绑定事件，不仅繁琐，新增元素还需重新绑定。
使用事件委托，只需为 ul 绑定一次事件：
const list = document.querySelector('ul');list.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('Clicked on:', e.target.textContent);
}
});
这样，无论 li 是何时添加的，点击都会通过冒泡被 ul 捕获并正确处理。
事件委托的优势与注意事项
- 减少内存占用：避免为多个元素重复绑定事件监听器。
- 支持动态元素：无需为新插入的 DOM 节点重新绑定事件。
- 注意事件源判断：必须通过 e.target 准确识别实际触发事件的元素，防止误处理。
- 并非所有事件都冒泡：如 focus、blur 等不冒泡，可用 focusin/focusout 替代。
基本上就这些。掌握事件流和事件委托，能让你的事件处理逻辑更清晰、性能更优。关键是理解冒泡机制，并善用 e.target 进行事件代理判断。
