js事件（一）之事件流

1.事件流定义

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

2.举个栗子

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>事件流</title>

         <style>

             div{width: 300px;height: 300px;background: darkcyan;}

             section{width: 200px;height: 200px;background: orange;}

             p{width: 100px;height: 100px;background:tomato;}

         </style>

     </head>

     <body>

         <div id="grandfather">

             爷爷

             <section id="father">

                 爸爸

                 <p id="son">儿子</p>

             </section>

         </div>

     </body>

     <script>

         var grand  = document.getElementById('grandfather'),

             father = document.getElementById('father'),

             son    = document.getElementById('son');

         son.onclick = function(){

             alert('son');

         }

         father.onclick = function(){

             alert('father');

         }

         grand.onclick = function(){

             alert('grand');

         }

     </script>

 </html>

执行结果如下：(先后弹出son，father，grand界面)

在冒泡型事件流中click事件传播顺序为div=>body=>html=>document

在捕获型事件流中click事件传播顺序为document=>html=>body=>div

如图：

注意：

注意：

1、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。
IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

3、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。

处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。

冒泡阶段：事件又传播回文档。

DOM2级事件 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。这两个方法都需要三个参数，分别为：事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。

由上图可知，捕获过程要先于冒泡过程。

第三个参数就是是否支持事件捕获，true支持事件捕获，false支持事件冒泡。