DOM事件流-----捕獲與冒泡

捕獲與冒泡是什麼

DOM事件流（event flow ）存在三個階段：
事件捕獲階段、
處於目標階段、
事件冒泡階段。

事件捕獲（event capturing）：通俗的理解就是，當鼠標點擊或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式註冊了對應的事件的話，會先觸發父元素綁定的事件。
**
事件冒泡（dubbed bubbling）：與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。
無論是事件捕獲還是事件冒泡，它們都有一個共同的行爲，就是事件傳播。

dom標準事件流的觸發的先後順序爲：先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之後通過事件傳播進行事件冒泡

另外IE10及以下不支持捕獲事件，IE11、Chrome 、Firefox、Safari等瀏覽器則同時存在。

監聽函數addEventListener(event, listener, useCapture)

addEventListener(event, listener, useCapture）　
這個函數可以監聽到dom事件捕獲階段和冒泡階段
此函數需要傳三個參數
event: 事件名
listener：函數
useCapture：這個參數默認爲false,監聽冒泡事件傳播，爲ture時監聽捕獲

我們來用這個方法做個例子來詳細解釋一下捕獲與冒泡具體表現差異

這是兩個父子關係的div，並分別爲這兩個div和body都綁定了點擊事件：

 <script type="text/javascript">
         var parent = document.getElementById("parent");       
          var child = document.getElementById("child");
          
        document.body.addEventListener('click',function(e){           
         console.log('click--body')        })
         
        parent.addEventListener('click',function (e) {           
         console.log("click-parent");        })
         
        child.addEventListener('click',function (e) {            
        console.log("click-child");        })        
       

        </script>

通過"addEventListener"方法，採用事件冒泡方式給dom元素註冊click事件，點擊子元素會發生什麼呢？如下圖所示：
如果點擊子元素不想觸發父元素的事件怎麼辦？肯定可以的，那就是停止事件傳播—event.stopPropagation()
如果點擊子元素不想觸發父元素的事件怎麼辦？那就是停止事件傳播—event.stopPropagation()，在我們剛纔寫的代碼中加入此方法：

child.addEventListener('click',function (e) {            
	console.log("click-child");            
	e.stopPropagation() 
 })

當我們點擊子元素：

可以看到我們成功的阻止了冒泡行爲

接下來我們用"addEventListener"方法同時監聽一下捕獲階段和冒泡階段，

 <script type="text/javascript">       
  var parent = document.getElementById("parent");       
   var child = document.getElementById("child");
   
   	document.body.addEventListener('click',function(e){            
         console.log('捕獲-body')        },true)        
         
         parent.addEventListener('click',function(e){            
         cnsole.log('捕獲-parent')        },true)       
         
         child.addEventListener('click',function(e){           
           console.log('捕獲-child')        },true)    
      
        document.body.addEventListener('click',function(e){           
         console.log('click--body')       })
         
        parent.addEventListener('click',function (e) {           
         console.log("click-parent");             })
         
        child.addEventListener('click',function (e) {           
         console.log("click-child");               })        
         
              
           </script>
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20191104090854421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhbjEzNDcxOTYzODY=,size_16,color_FFFFFF,t_70)

可以看到當我們點擊到子元素，先輸出的是捕獲，再輸出的是冒泡階段的代碼，