事件冒泡和事件捕獲是什么？
在dom2級中定義了兩個方法分別是：addEventListener 和 removeEventListener，用于事件的綁定。這兩個方法都接受三個常數：處理事件名，事件處理程序，布爾值（默認是false）。事件冒泡和事件捕獲就是addEventListener 和 removeEventListener中的第三個常數（布爾值），其中 true 代表事件捕獲，而 false 代表事件冒泡（默認）。
事件冒泡和事件捕獲的區別是什么？
高程3中有對dom2級事件處理程序有詳細的描述，根據我的理解簡單總結下（如果有不對的請指出）：事件的傳播總共分為三個部分，首先進行事件捕獲，事件捕獲是事件由父級向子集傳遞時觸發的（父級的addEventListener的布爾值為true）。其次是事件的自身處理階段（在自身上添加的事件，一定注意是自身添加的而不是父級的事件）。最后一個階段是事件冒泡，事件冒泡是事件由子集向父級反饋時的時候觸發的（父級的addEventListener的布爾值為false）。這里說下我之前的疑惑點，可能大家也會有一樣的困惑：如果只有一個事件的時候addEventListener的布爾值不管是什么都會彈出對應的內容，而只有當同時有好幾個事件時才能比較出他們的不同，下面再結合幾個例子可以很好的理解事件冒泡和事件捕獲的區別。
樣式是
```
#box{
width:200px;
height:200px;
background:#222;
}
#outer{
width:100px;
height:100px;
background:#ddd;
}
#inner{
width:50px;
height:50px;
background:#eee;
}
```
js代碼
```
varouter =document.getElementById("outer");
varinner =document.getElementById('inner');
varoBox=document.getElementById('box');
oBox.addEventListener("click",function(){
alert('1');
},true)
oBox.addEventListener("click",function(){
alert('4');
},false)
outer.addEventListener("click",function(){
alert("2");
},true);
inner.addEventListener("click",function(){
alert('3.2')
},false)
inner.addEventListener("click",function(){
alert("3.1");
},true);
```
效果如圖
現在點擊obox依次彈出 1 和 4 ，點擊 outer 依次彈出 1，2，4，而點擊 inner 依次彈出 1，2，3.2，3.1，4。結合時代碼來看，首先點擊對應的盒子會彈出屬于他的事件（注意子元素可以出發父元素事件，反之則不能），首先看點擊 outer 時候 分別彈出 1，2，4 ，此時以outer作為比較基準點 1 是發生在事件捕獲階段 2 是發生在 自身處理階段 而 4 是發生在事件捕獲階段。下面再看 點擊 inner 依次彈出 1，2，3.2，現在我們以3.1 同樣 1 ?2 是發生事件捕獲階段 而 3.2 和 3.1 發生在事件處理階段所以它自身的布爾值并不對它自己起作用，而看先后注冊順序，因為 3.2 在 3.1 之前注冊，所以首先彈出 3.2，最后彈出的是發生在事件冒泡階段的 4 了。
退一步看都是false的結果
理解了上面的例子，再之際體會下全是 false 的結果，是不是感覺理解更深一步了。
```
oBox.addEventListener("click",function(){
alert('1');
},false)
oBox.addEventListener("click",function(){
alert('4');
},false)
outer.addEventListener("click",function(){
alert("2");
},false);
inner.addEventListener("click",function(){
alert('3.2')
},false)
inner.addEventListener("click",function(){
alert("3.1");
},false);
```
呢么如果都換成 true 又是什么結果呢？
