DOM 之 事件流

js和html之间的交互行为是通过事件实现的。而这事件包括三部分：事件源、事件类型、事件处理程序。

 一、事件执行步骤

1. 获取事件源
2. 绑定事件
3. 采用函数赋值形式来添加事件处理程序

二、事件流

当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流，描述了页面接受事件的顺序。

1、事件冒泡

事件冒泡也称 IE事件流，事件被定义为从文档树中最深的节点（最具体的元素）开始触发，然后向上传播到没有那么具体的元素。

例如：当有一个名叫“big”边框颜色为红色的大div，其子代div为边框颜色为蓝色的“middle”div，而“middle”div的子代div则是边框颜色为绿色的“small”div。

 给每个div设置被点击时就会打印本div名字的事件，当只点击页面最深的节点——“small”div时，三个div名字都会在控制台打印出来，因为其父类div和父类的父类div都被传播到而被触发事件，直到传播到body、html和document，这就是事件冒泡。

2、阻止事件冒泡

使用event.stopPropagation()方法在被传播的元素的事件中

如上例子，如果想要阻止“middle”div被事件冒泡受到影响，则在其事件中添加此方法：

 function middle() {
      event.stopPropagation()
      console.log('middle');
    }

3、事件捕获

事件捕获是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。

简单来说，事件捕获在事件触发顺序上和事件冒泡相反。拿上面例子来说，则是当点击small时，事件会从document触发->html->body->big->middle，最后才会到small。

实际当中几乎不会使用事件捕获。通常建议使用事件冒泡，特殊情况下可以使用事件捕获。

4、DOM事件流

DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。

事件捕获最先发生，为提前拦截事件提供可能；其次实际目标到达，目标元素接受到事件；最后阶段是冒泡，最迟要在这个阶段响应事件。