1.时间流分为三个阶段:由根往目标的捕获阶段、目标阶段、由目标到根的冒泡阶段。
2.addEventListener(type, listener, boolean)
捕获阶段:boolean是true并注册了事件的元素
目标阶段:目标元素
冒泡阶段:boolean是false并注册了事件的元素
全为 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.
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.