js事件（一）之事件流

1.事件流定义

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

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

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

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

2.举个栗子

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>事件流</title>
 6         <style>
 7             div{width: 300px;height: 300px;background: darkcyan;}
 8             section{width: 200px;height: 200px;background: orange;}
 9             p{width: 100px;height: 100px;background:tomato;}
10         </style>
11     </head>
12     <body>
13         <div id="grandfather">
14             爷爷
15             <section id="father">
16                 爸爸
17                 <p id="son">儿子</p>
18             </section>
19         </div>
20     </body>
21     <script>
22         var grand  = document.getElementById('grandfather'),
23             father = document.getElementById('father'),
24             son    = document.getElementById('son');
25         son.onclick = function(){
26             alert('son');
27         }
28         father.onclick = function(){
29             alert('father');
30         }
31         grand.onclick = function(){
32             alert('grand');
33         }
34         
35     </script>
36 </html>