W3C 标准事件流（DOM2 级事件流）包含 3 个阶段，捕获阶段、目标阶段、冒泡阶段。在捕获阶段，事件对象通过目标的祖先从窗口传播到目标的父级。在目标阶段，事件对象到达事件对象的事件目标。在冒泡阶段，事件对象以相反的顺序通过目标的祖先传播，从目标的父级开始，到窗口结束。W3C 事件模型中发生的任何事件，先从顶层对象 window 开始一路向下捕获，直到达到目标元素，其后进入目标阶段。
图 1：标准事件流的事件传播顺序
图 2：标准事件流事件处理结果
目标元素 div 接收到事件后开始冒泡到顶层对象 window。例如，当用户单击了<div>元素，则首先会进行事件捕获，此时事件按 window→document→<html>→<body> 的顺序进行传播，当事件对象传到 <div> 时进入目标阶段，接着事件对象又从目标对象传到 body，从而进入事件的冒泡阶段，此时事件对象按 <body>→<html>→document→window 的顺序传播事件。
各阶段的事件流如图 1 所示。
图 1：标准事件流的事件传播顺序
【例 1】标准事件流的事件处理。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标准事件流的事件处理</title>
<style>
div{padding:40px;}
#div1{background:red;}
#div2{background:green;}
#div3{background:blue;position:absolute;top:300px;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
//标准事件流处理事件
oDiv1.addEventListener('click',function(){
console.log('事件冒泡1');
},false);
oDiv1.addEventListener('click',function(){
console.log('事件捕获1');
},true);
oDiv3.addEventListener('click',function(){
console.log('事件捕获2');
},true);
oDiv3.addEventListener('click',function(){
console.log('事件冒泡2');
},false);
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
上述 JS 代码分别对 div1 和 div3 元素调用两次 addEventListener() 绑定事件函数，从 addEventListener() 的第三个参数的取值可知，div1 和 div3 元素都同时包含事件冒泡和事件捕获阶段。当单击 div3 元素时，事件流首先进入捕获阶段。对 div1～div3 这三个元素来说，单击事件会首先由 div1 捕获到，然后再由 div1 传播到 div2，至此捕获阶段结束。
接着事件流进入目标阶段，单击事件从 div2 传到目标元素 div3，然后又由 div3 传到 div2，至此目标阶段结束。此后事件流进入冒泡阶段，此时将由 div2 开始从下往上冒泡将单击事件传播给div1。示例 1 在 Chrome 浏览器中的运行结果如图 2 所示。
图 2：标准事件流事件处理结果
从图 2 中可以看到，在标准事件流中，首先从上往下执行事件捕获，然后再从下往上执行事件冒泡。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/24036.html