当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript事件流与委托详解

JavaScript事件流与委托详解

2026-01-02 21:01:58 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript事件流与委托机制解析》，聊聊，我们一起来看看吧！

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

JavaScript DOM 事件：事件流与事件委托机制

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

阻止事件传播

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

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

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

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

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

比如有一个无序列表 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 捕获并正确处理。