在 Web 开发中，事件处理是一个非常重要的部分。DOM 事件流描述了从事件开始到最终处理的整个过程。理解事件阶段和执行顺序对于编写可靠的 JavaScript 代码非常重要。
事件阶段
DOM 事件流被分为三个阶段：
- 捕获阶段（Capture Phase）：事件从最外层元素向下传递至目标元素，逐级检查是否有注册该事件类型的监听器。如果有，则立即执行该监听器。
- 目标阶段（Target Phase）：事件达到目标元素并触发该元素上注册的监听器。
- 冒泡阶段（Bubble Phase）：事件从目标元素开始向上传播至最外层元素，逐级检查是否有注册该事件类型的监听器。如果有，则立即执行该监听器。
注：在捕获和冒泡阶段，事件是按照从最外层元素向内层元素传递的顺序进行的，而不是从父元素到子元素或者从子元素到父元素。
执行顺序
浏览器采用事件委托来提高性能。当事件发生时，从根元素开始，按照捕获顺序依次检查每个元素是否有该事件类型的监听器。一旦找到，就会立即执行该监听器。如果没有找到，则继续向下传递至目标元素。
在目标元素上触发该事件后，执行该元素上注册的监听器。然后，从目标元素开始按照冒泡顺序向上传递，逐级检查每个元素是否有该事件类型的监听器。一旦找到，就会立即执行该监听器。
总之，事件处理程序在捕获阶段和冒泡阶段被调用，但是它们在目标阶段只被调用一次。
示例代码
HTML 代码：
<div id="outer"> <div id="inner"></div> </div>
JavaScript 代码：
-- -------------------- ---- ------- ----- ----- - --------------------------------- ----- ----- - --------------------------------- ------------------------------- -- -- ------------------ ---------- ------ ------------------------------- -- -- ------------------ ---------- ------ ------------------------------- -- -- ------------------ --------- ------- ------------------------------- -- -- ------------------ --------- ------- ------------------------------- -- -- ------------------ ---------- ------------------------------- -- -- ------------------ ----------展开代码
点击 inner 元素时，控制台将输出以下内容：
outer capture
inner capture
inner target
outer bubble从输出可以看出，事件按照捕获顺序执行了 outer capture 和 inner capture 监听器，然后在目标元素上执行了 inner target 监听器，最后按照冒泡顺序执行了 outer bubble 监听器。
总结
理解 DOM 事件流的阶段和执行顺序可以帮助我们更好地编写可靠的 JavaScript 代码。在实际开发中，我们可以利用事件委托和 DOM 事件流来提高性能和减少代码量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/4059
