事件冒泡、事件捕获

addEventListener() 接受 3个参数：要处 理的事件名、作为事件处理程序的函数和一个布尔值。后这个布尔值参数如果是 true，表示在捕获 阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序，如果不加最后一个参数，默认为false， 再冒泡阶段调用事件处理程序。

一、事件冒泡

事件冒泡：即由事件开始由具体的元素接受，然后逐级向上传播到不具体的节点。

例如当点击C时，会打印出下面结果：

 <div class="parent">    <div class="a">      A      <div class="b">        B        <div class="c">          C        </div>      </div>    </div>

window.onload = function () {      var a = document.getElementsByClassName("a")[0];      var b = document.getElementsByClassName("b")[0];      var c = document.getElementsByClassName("c")[0];      a.addEventListener("click", function () {        console.log('事件冒泡A');      })      b.addEventListener("click", function () {        console.log('事件冒泡B');      })      c.addEventListener("click", function () {        console.log('事件冒泡C');      })    }

二、事件捕获

事件捕获：不太具体的节点应该更早接受事件，而具体的节点最后接收到事件。

当点击C时：

 <div class="parent">    <div class="a">      A      <div class="b">        B        <div class="c">          C        </div>      </div>    </div>  </div>

window.onload = function () {      var a = document.querySelector(".a");      var b = document.querySelector(".b");      var c = document.querySelector(".c");      a.addEventListener("click", function () {        console.log('事件捕获A');      }, true)      b.addEventListener("click", function () {        console.log('事件捕获B');      }, true)      c.addEventListener("click", function () {        console.log('事件捕获C');      }, true)    }