JavaScript 事件传播

当一个事件触发了之后，它会在父、子元素之间进行传播。
一、 事件传播的三个阶段
捕获阶段：从window对象一直传播到目标节点
目标阶段：在目标节点上触发事件
冒泡阶段：从目标阶段冒泡回window对象

JavaScript中的事件流是指事件触发的顺序，事件传播有两种方式，分别是事件冒泡和事件捕获。

二、 在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时，表示在捕获阶段监听。控制台输出信息：
   

从上述的例子中，我们可以看到捕获阶段和冒泡阶段事件传播的方向