DOM 事件流

文章目录
什么是dom事件流
dom事件流的三个阶段
冒泡阶段处理程序
捕获阶段处理程序
如何阻止事件捕获/冒泡
0级，2级事件什么意思
目标阶段
事件流的根节点？
什么是dom事件流
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

dom事件流的三个阶段
w3c规范规定有三个阶段：捕获阶段->目标阶段->冒泡阶段
但是js只能在捕获/冒泡中的一个阶段处理程序。

冒泡阶段处理程序
1）dom0级事件： on+事件名
2）IE8以及以下：attachEvent
3) dom2级事件：addEventListener, 第三个参数为false(默认false)

捕获阶段处理程序
1）dom2级事件：addEventListener, 第三个参数为true(默认false)

如何阻止事件捕获/冒泡
e.stopPropagation() 既可以阻止冒泡也可以阻止捕获
IE低版本：e.cancelBubble()

e.storpImmediatePropagation() 既可以阻止冒泡也可以阻止捕获

区别：storpImmediatePropagation() 会阻止该元素的其他事件，而stopPropagation不影响该元素的其他事件。

0级，2级事件什么意思
代表dom标准迭代版本，类比es5,es6

目标阶段
目标阶段，事件发生的顺序，只和书写顺序有关；storpImmediatePropagation会阻止目标阶段的其他事件发生；也会阻止事件继续传播（冒泡/捕获）

事件流的根节点？
window
捕获阶段的节点顺序： window->document->html->body->自定义元素节点