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>