Js事件处理之“事件传播三个阶段”

一、三个阶段

根据事件流类型，可以把事件传播的整个过程分为3个阶段，依次为：

1. 事件捕获阶段
   先由文档的根节点document往事件触发对象，从外向内捕获事件对象
2. 目标阶段（目标对象本身的事件程序）
   到达目标事件位置，触发事件本身的程序内容；
3. 事件冒泡阶段¹
   再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

二、事件传播过程

特点：从document对象开始，最后返回document对象结束。

本质上，事件首先向下遍历父元素，直到到达目标元素(捕获阶段)为止。
当事件到达目标时，它将在那儿触发(目标阶段)。
然后返回链上(冒泡阶段)，并一路调用处理程序

三、实例

目标元素是指触发事件的确切位置。

例如，如果您单击<div>中的<button> ，则相应的<button>标记将成为目标。 该元素可以作为event.target进行访问，并且在事件传播的整个阶段都不会更改。

蓝色箭头代表捕获过程，紫色箭头代表冒泡过程：

---

1. （1）所有现代浏览器都支持事件冒泡，但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
   （2）IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
   （3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。 ↩︎

一、三个阶段

根据事件流类型，可以把事件传播的整个过程分为3个阶段，依次为：

1. 事件捕获阶段
   先由文档的根节点document往事件触发对象，从外向内捕获事件对象
2. 目标阶段（目标对象本身的事件程序）
   到达目标事件位置，触发事件本身的程序内容；
3. 事件冒泡阶段¹
   再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

二、事件传播过程

特点：从document对象开始，最后返回document对象结束。

本质上，事件首先向下遍历父元素，直到到达目标元素(捕获阶段)为止。
当事件到达目标时，它将在那儿触发(目标阶段)。
然后返回链上(冒泡阶段)，并一路调用处理程序

三、实例

目标元素是指触发事件的确切位置。

例如，如果您单击<div>中的<button> ，则相应的<button>标记将成为目标。 该元素可以作为event.target进行访问，并且在事件传播的整个阶段都不会更改。

蓝色箭头代表捕获过程，紫色箭头代表冒泡过程：

---

1. （1）所有现代浏览器都支持事件冒泡，但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
   （2）IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
   （3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。 ↩︎