JavaScript 事件傳播

當一個事件觸發了以後，它會在父、子元素之間進行傳播。
1、 事件傳播的三個階段
捕獲階段：從window對象一直傳播到目標節點
目標階段：在目標節點上觸發事件
冒泡階段：從目標階段冒泡回window對象

JavaScript中的事件流是指事件觸發的順序，事件傳播有兩種方式，分別是事件冒泡和事件捕獲。

2、 在HTML元素節點上添加事件監聽函數
用addEventListener給節點添加監聽函數，代碼以下。

<div>
      <p>點擊觸發事件</p>
</div>

<script>
  var p = $('p')[0];
  var div = $('div')[0];

  var phase = {
    1: '捕獲',
    2: '目標',
    3: '冒泡'
  }
  var fn = function(event) {
    console.log(arguments[0])
    var tag = event.currentTarget.tagName;
    var phaseName = phase[event.eventPhase];
    console.log("事件信息:");
    console.log(event)
    console.log("當前"+tag+"元素正處於"+phaseName+"階段");
  }

  
  //監聽函數是否在捕獲階段觸發，默認爲false，表示只在冒泡階段監聽
  p.addEventListener('click',fn,false);  
  div.addEventListener('click',fn,false);  

  p.addEventListener('click',fn,true);  
  div.addEventListener('click',fn,true);   
</script>

1. 當參數設爲false時，表示只在冒泡階段監聽，因此當事件從p標籤向上冒泡到div標籤時，會在兩個節點上分別觸發一次click事件。控制檯輸出信息：
   
2. 當參數設爲true時，表示在捕獲階段監聽。控制檯輸出信息：
   

從上述的例子中，咱們能夠看到捕獲階段和冒泡階段事件傳播的方向