本文是原创文章，如需转载，请注明文章出处
JS和AS师出同源，所以事件流的3个阶段也跟AS一样，分别是捕获阶段，目标阶段，冒泡阶段。
下面写了个例子可以清晰的看出事件流的顺序：
eventTest.html
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="eventTest.js"></script> </head> <body> <div id="div" style="position:relative;100%;height:200px;background: #00ff00"> <button id="btn" style="position:absolute;display:block;left:50%;top:50%;margin-left:-26px;margin-top:-10px">button</button> </div> </body> </html>
eventTest.js
window.onload = function() { init(); } function init(){ var div = document.getElementById("div"); div.addEventListener("click", onDivCaptureHandler, true); div.addEventListener("click", onDivBubbleHandler, false); var com = document.getElementById("btn"); com.addEventListener("click", onBtnCaptureHandler, true); com.addEventListener("click", onBtnBubbleHandler, false); } function onDivCaptureHandler(event){ console.log("div capture----eventPhase:" + event.eventPhase); } function onDivBubbleHandler(event){ console.log("div Bubble-----eventPhase:" + event.eventPhase); } function onBtnCaptureHandler(event){ console.log("btn capture-----eventPhase:" + event.eventPhase); } function onBtnBubbleHandler(event){ console.log("btn bubble-----eventPhase:" + event.eventPhase); }
这个例子很简单，先添加一个绿色的div，其中有个居中的按钮，JS代码中分别给div和按钮添加点击事件的监听器，需要注意的是，addEventListener的第三个参数，为true时这个事件只在捕获阶段触发。
以下是结果：
点击按钮之后，控制台输出：
div capture----eventPhase:1
btn capture-----eventPhase:2
btn bubble-----eventPhase:2
div Bubble-----eventPhase:3
由此可以清晰的看出，捕获阶段是从最上层的元素逐层向下直到最具体的点击对象，而冒泡阶段是从最具体的点击对象逐层向上直到最上层。
另外，需要注意的是，addEventListener的第三个参数无论是true还是false，当具体对象的监听器触发时，事件阶段都是2，也就是目标阶段。