js有好多的知識需要不斷積累，但是不能淺嘗，應該深究其內因，並運用在日常開發過程中。

1. 捕獲階段：

   事件從根節點流向目標節點，途中流經各個DOM節點，在各個節點上觸發捕獲事件，直到達到目標節點。

   那麼捕獲階段有什麼用嗎？完全可以沒有捕獲階段也可以啊？

   捕獲階段的主要任務是建立傳播路經，在冒泡階段根據這個路經回溯到文件根節點

2. 目標階段
   事件到達目標節點時，就到了目標階段，事件在目標節點上被觸發

3. 冒泡階段
   事件在目標節點上觸發後，不會終止，一層層向上冒，回溯到根節點。

4. 運用舉例：

   html程式碼

     <div class="a">
         <li class
    
   ="b">
           <a href="#" class="c">buhuo</a>
         </li>
       </div>

   • 1
   • 2
   • 3
   • 4
   • 5

   js程式碼

   var div = document.getElementsByClassName('a')[0];    //注意[0]
   var li = document.getElementsByClassName('b')[0];
   var a = document.getElementsByClassName('c')[0];
   
   
   //第三個引數預設是false,
   //是對事件冒泡過程新增函式進行處理
   div.addEventListener('click'
    
   ,function(event){
     console.log('div');
   });
   li.addEventListener('click',function(event){
     console.log('li');
   });
   a.addEventListener('click',function(event){
     console.log('a');
   });
   
   
   //事件捕獲過程處理
   //第三個引數設為true
   div.addEventListener('click',function(event){
     console.log('div');
   },true);
   li.addEventListener('click'
    
   ,function(event){
     console.log('li');
   },true);
   a.addEventListener('click',function(event){
     console.log('a');
   },true);
   
   

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25
   • 26
   • 27
   • 28
   • 29
   • 30
   • 31

   執行結果
   div
   li
   a
   a
   li
   div

   可知：首先是捕獲階段執行，再是冒泡階段

5. 運用在事件委託上
   JavaScript事件代理可以把事件處理器新增到一個父元素上，這樣就避免了把事件處理器新增到多個子元素上。

6. 阻止事件冒泡

   某個DOM節點綁定了某事件監聽器，本來是想當該DOM節點觸發事件，才會執行回撥函式。結果是該節點的某後代節點觸發某事件，由於事件冒泡，該DOM節點事件也會觸發，執行了回撥函式，這樣就違背了最初的本意了。

   html

   <!-- 阻止事件冒泡 -->
       <li class="aa">
         <a href="#" class="bb">阻止事件冒泡</a>
         <a href="#" class="cc">cc</a>
       </li>

   • 1
   • 2
   • 3
   • 4
   • 5

   js

   var li1 = document.getElementsByClassName('aa')[0];
   li1.addEventListener('click',function(event){
     if(event.target.tagName.toLowerCase() === 'li'){
       console.log(event.target);
     }
     console.log(event.currentTarget);  //監聽節點
   })
   for(var i=0;i<li1.children.length;i++){
     li1.children[i].addEventListener('click',function(event){
       event.stopPropagation();  //在子元素上阻止冒泡
     })
   }

   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12

   結果
   點選a標籤時，沒有任何反應，當點選li標籤時，會輸出物件

   注意：
   無法在捕獲階段阻止事件冒泡
   所以當上述程式碼加上true後，達不到效果