博客站

DOM事件主要分为以下三个阶段：

1. 捕获阶段

• 定义：事件从window对象自上而下向目标节点传播的过程，即从最外层容器（祖先元素）往最里层元素传递。在此过程中，有事件处理函数的就执行。
• 特点：此阶段事件处理程序的执行顺序与它们在DOM树中出现的顺序相反，即从祖先元素到目标元素。

2. 目标阶段

• 定义：事件到达目标元素并触发相应事件处理程序的阶段。
• 特点：在目标阶段，事件处理程序会针对目标元素执行。这是事件传播过程中的核心环节。

3. 冒泡阶段

• 定义：事件从目标元素由内向外冒泡执行的过程，即从目标元素传播到其父元素，再传播到更上一级的父元素，直至传播到DOM树的顶层（通常是document对象）。
• 特点：此阶段事件处理程序的执行顺序与它们在DOM树中出现的顺序相同，即从目标元素到祖先元素。冒泡阶段在实际开发过程中可能会影响业务逻辑，所以为了防止这种情况，可以使用stopPropagation()函数阻止冒泡。

在JavaScript中，可以通过addEventListener()方法的第三个参数来指定事件处理程序是在捕获阶段执行还是在冒泡阶段执行。如果该参数为true，则事件处理程序在捕获阶段执行；如果为false（或不写），则事件处理程序在冒泡阶段执行。

综上所述，DOM事件的三个阶段共同构成了事件的处理流程，开发者可以根据需要在不同阶段添加事件处理程序来实现特定的功能。