J*aScript DOM 事件：事件流与事件委托机制_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript DOM 事件：事件流与事件委托机制

2025-10-30

浏览次数：次

返回列表

事件流包含捕获、目标和冒泡三个阶段，事件从window开始向下传播至目标元素再向上冒泡；2. 可通过addEventListener的第三个参数指定在捕获或冒泡阶段监听事件；3. 使用event.stopPropagation()阻止事件传播，stopImmediatePropagation() additionally阻止同元素其他监听器执行；4. 事件委托利用冒泡机制将事件绑定到父元素处理子元素事件，减少内存占用并支持动态添加的元素；5. 需通过e.target准确判断事件源，并注意并非所有事件都冒泡，如focus、blur需用focusin/focusout替代。掌握这些机制可提升代码性能与维护性。

javascript dom 事件：事件流与事件委托机制

在 J*aScript 中，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); // 冒泡阶段监听（默认）

阻止事件传播

有时不希望事件继续传播，可以使用以下方法：

event.stopPropagation()：阻止事件继续在 DOM 树中传播，但不影响当前元素其他监听器的执行。
event.stopImmediatePropagation()：除了阻止传播，还阻止当前元素上其他同类型事件监听器的执行。

例如，点击子元素时，如果不希望触发父级的 click 事件，可在子元素事件处理器中调用 stopPropagation。

事件委托：利用事件冒泡优化性能

事件委托是一种利用事件冒泡机制，将事件监听器绑定到父元素来处理子元素事件的技术。它特别适用于动态内容或大量子元素的场景。

新思创OA办公自动化系统增强版

中国最实用的办公自动化系统，全面提升单位的工作效率和质量，整合企业资源，规范办公流程，加快信息流通，提高办公效率，降低办公成本，通过提高执行力来完善管理，从而提升企业竞争力含公告通知、文件传送、电子通讯薄、日程安排、工作日记、工作计划、个人（公共）文件柜、网上申请和审批、电子邮件、手机短信、个人考勤、知识管理、人事管理、车辆管理、会议管理、印信管理、网上填报、规章制度、论坛、网络会议、语音聊天、

0 查看详情新思创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 捕获并正确处理。