DOM 事件流

先看一张图(图片来自网络,如有侵权联系本博主)

这就是一个完整的事件流

DOM(Document Object Model 文档对象模型)，是一个树型结构。当DOM中某一个HTML元素产生一个事件时，该事件会在该元素结点与DOM的根结点之间按特定的方式进行传播，也就是说，该条路径上所经过的所有结点都会收到该事件，这个传播过程称之为DOM事件流。

事件在DOM中传播的顺序有两种类型：事件捕获和事件冒泡

冒泡型事件：事件由该结点一直传播到根结点，一直往上冒。

捕获型事件：和冒泡型事件刚好相反，它是从根结点一直传播到该结点，从上到下的一个过程。

标准的事件传播分为三个阶段：
1）事件捕获阶段
事件沿着DOM数向下传递，经历目标结点的每一个祖先结点，直到目标结点。（如用户点击了一个
超链接，则该点击事件将从document结点到html结点，body结点以及包含该链接的父亲结点）
在此过程中，浏览器都会检测针对该事件的捕获事件监听器，并运行该事件监听器。
2）目标触发阶段
浏览器在查找到已经指定给目标元素的事件监听器后，就会运行该事件监听器。
3）事件冒泡阶段
事件将沿着DOM树向上传递，再次逐个访问目标元素的祖先结点到document结点。
在此过程中，浏览器都会将检测那些不是捕获事件监听器的事件监听器，并执行它们。

注意：所有的事件都经过捕获阶段和目标阶段，但并不是所有的事件都会经过冒泡阶段。
例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。

顺便解释下：停止事件冒泡和阻止事件的默认行为这两个概念，这两个概念非常重要，它们对复杂的应用程序处理非常有用。

1.停止事件冒泡

停止事件冒泡是指，停止冒泡型事件的进一步传递（取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件，我们还可以停止支持DOM标准浏览器的捕捉型事件，用topPropagation()方法）。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

2.阻止事件的默认行为

停止事件的默认行为是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。例如，如果表单中input type 属性是 “submit”，点击后在事件传播完浏览器就自动提交表单。又例如，input 元素的 keydown 事件发生并处理后，浏览器默认会将用户键入的字符自动追加到 input 元素的值中。