首页 > 编程笔记 > JavaScript笔记

W3C标准事件流

W3C 标准事件流(DOM2 级事件流)包含 3 个阶段,捕获阶段、目标阶段、冒泡阶段。在捕获阶段,事件对象通过目标的祖先从窗口传播到目标的父级。在目标阶段,事件对象到达事件对象的事件目标。在冒泡阶段,事件对象以相反的顺序通过目标的祖先传播,从目标的父级开始,到窗口结束。W3C 事件模型中发生的任何事件,先从顶层对象 window 开始一路向下捕获,直到达到目标元素,其后进入目标阶段。

目标元素 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 中可以看到,在标准事件流中,首先从上往下执行事件捕获,然后再从下往上执行事件冒泡。

所有教程

优秀文章