显示对象上的事件：理解事件流

当事件发生在显示对象上(比如浏览器)的时候，会遇到一个很有趣的问题：页面的那一部分会拥有某个特定的事件？比如当你点击页面上的一栋小房子的时候，根据视角的远近，你点击的对象会发生变化。从最远处来看你点击的是页面，镜头拉近你点击的是小房子，再拉近你点击的是房子上的一面墙，再拉近你点击的是墙上的一块砖。也就是说，你点击一次页面也许会有很多显示对象发生了点击事件，如果你在每一个显示对象上都绑定了点击处理程序，那么这些程序都会执行。这里会遇到一个问题：这些程序按什么顺序执行。这取决于显示对象接受到点击事件的顺序，一般有两种模式：事件冒泡和事件捕获。这种事件在显示对象上按顺序发生的过程称为事件流。

1. 事件冒泡

事件冒泡，即事件开始时由最具体的元素(比如上例的砖块)接受，然后逐级向上传播到较为不具体的节点(文档);

2. 事件捕获

事件捕获的思想是不太具体的元素(文档)更早的接受事件，而最具体的元素最后接受到事件(砖块)。事件捕获的用意在于事件到达预订目标之间捕获它。

在JavaScript中为DOM中的元素添加事件处理程序时，有三个参数，其中第三个参数是一个布尔值，当为true时，表示在捕获阶段调用事件处理程序，为false时，表示在冒泡阶段调用事件处理程序，举例如下：

 1 <body>
 2     <div id="outer">
 3         <div id="inner" >
 4         </div>
 5     </div>
 6 </body>
 7 
 8 //例一
 9 var btn1=document.getElementById("outer");
10 btn1.addEventListener("click",function(){
11     alert('outer')
12 },false);
13 
14 var btn2=document.getElementById("inner");
15 btn2.addEventListener("click",function(){
16     alert('inner')
17 },false);
18 
19 //例二
20 var btn1=document.getElementById("outer");
21 btn1.addEventListener("click",function(){
22     alert('outer')
23 },false);
24 
25 var btn2=document.getElementById("inner");
26 btn2.addEventListener("click",function(){
27     alert('inner')
28 },false);

上面例一的事件处理程序都发生在冒泡阶段，所以会先输出inner，再输出outer。例二中id为outer元素上的事件处理程序发生在捕获阶段，所以会先输出outer，再输出inner。

注意：事件流发生在父元素和子元素之间，而不是两个同级的元素。