addEventListener方法

1.时间流分为三个阶段：由根往目标的捕获阶段、目标阶段、由目标到根的冒泡阶段。

2.addEventListener(type, listener, boolean)
捕获阶段：boolean是true并注册了事件的元素
目标阶段：目标元素
冒泡阶段：boolean是false并注册了事件的元素

<div id="outDiv">
    <div id="middleDiv">
      <div id="inDiv"></div>
    </div>
  </div>
</div>
<script>
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, flag);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, flag);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, flag);
</script>

 全为 false 时，触发顺序为：inDiv、middleDiv、outDiv;
 全为 true 时，触发顺序为：outDiv、middleDiv、inDiv;
 outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv;
 middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv;
 inDiv 为 true，其他为 false 时，触发顺序为：inDiv、middleDiv、outDiv;
 outDiv为 false，其他为 true时，触发顺序为：middleDiv、inDiv、outDiv;
 middleDiv为 false，其他为 true时，触发顺序为：outDiv、inDiv、middleDiv;
 inDiv为 false，其他为 true时，触发顺序为：outDiv、middleDiv、inDiv.