多次遇到事件冒泡與捕獲相關的題目，冒泡和捕獲機制在不同瀏覽器中的兼容性也不相同，IE中默認只支持冒泡機制，冒泡和捕獲都可以理解為事件的傳播，很明顯，在傳播的情況下容易觸發我們并不想觸發的事件，這在項目中會產生意想不到的后果，所以有必要理解清楚事件傳播機制，根據實際需要應用。
概念
冒泡
監聽事件觸發時，事件是從精確到不精確，從小范圍到大范圍，從底向上的一個順序進行觸發，也就是說首先執行當前最近的被選中的元素的事件，然后逐級向上執行父元素的事件，直至document或window（不同瀏覽器有不同）。
捕獲
捕獲機制和冒泡正好相反，事件觸發順序是從最不精確到最精確的當前被觸發事件的元素。
作用：
- 事件冒泡允許多個操作被集中處理，把事件處理器添加到一個父級元素上，而避免了為每一個子元素都添加處理器。
- 讓不同的對象同時捕獲一件事情，就像老板給每個員工都分派好了事情，只待一聲令下，員工開始在各自崗位執行自己的工作。
Demo演示
事件綁定
遵守W3C 標準的瀏覽器可以使用以下方式進行事件綁定
- addEventListener('Event', function(){},true/false)
第一個參數表示監聽的事件名稱，第二個參數是執行的動作，第三個參數將決定瀏覽器的響應方式，true表示瀏覽器采用capture響應方式，false表示瀏覽器采用bubble響應方式。 - 另一種方式是在JavaScript腳本中獲取事件句柄（事件名稱前加on就是事件句柄），并對事件句柄賦值處理函數，相關代碼如下：
function Do(){
alert(" 你點擊了一個button")；
}
<button id="btn" onClick="Do()"></div> - IE中是默認采用冒泡方式，不支持addEventListener()，使用attachEvent綁定事件。attachEvent('event',function(){})，事件要加上on，如onclick,onmouseover...
- 阻止事件傳播：支持W3C標準的瀏覽器可以在事件監聽流中使用event.stopPropagation()來阻止事件繼續傳播。IE中在事件監聽流中使用window.event.cancleBubble=true來阻止事件的冒泡。
實例與結果
- 演示圖如下所示
頁面結構代碼如下
<body>
<div class="parent" id="bubPar">
<div class="child" id="bubChi">
<section id="bubSec">
<h3>JS事件冒泡演示</h3>
<p>
設置監聽事件時，第三個參數值為“true”時，表示瀏覽器采用capture響應方式，false表示瀏覽器采用bubble響應方式。
</p>
<button id="btnBubble">冒泡</button>
</section>
</div>
</div>
<div class="parent" id="capPar">
<div class="child" id="capChi">
<section id="capSec">
<h3>JS事件捕獲演示</h3>
<p>
當使用事件捕獲時，符級元素先觸發，子級元素后出發。
</p>
<button id="btnCapture">捕獲</button>
</section>
</div>
</div>
</body>-
JS監聽事件如下
<script type="text/javascript">
var bubPar=document.getElementById('bubPar');
bubPar.addEventListener("click",function(){
alert("1");
},false);
var bubChi=document.getElementById('bubChi');
bubChi.addEventListener("click",function(){
alert("2");
},false);
var bubSec=document.getElementById('bubSec');
bubSec.addEventListener("click",function(){
alert("3");
},false);
var btnBubble=document.getElementById('btnBubble');
btnBubble.addEventListener("click",function(){
alert("4");
},false);var capPar=document.getElementById('capPar'); capPar.addEventListener("click",function(){ alert("1"); },true); var capChi=document.getElementById('capChi'); capChi.addEventListener("click",function(){ alert("2"); },true); var capSec=document.getElementById('capSec'); capSec.addEventListener("click",function(){ alert("3"); },true); var btnCapture=document.getElementById('btnCapture'); btnCapture.addEventListener("click",function(){ alert("4"); },false); </script> 結果
- 點擊冒泡按鈕：瀏覽器窗口一次彈出彈框 4 3 2 1
- 點擊捕獲按鈕：1 2 3 4
- 給捕獲事件示例中的<section>元素的監聽事件流中設置阻止事件的傳播，代碼如下：
var capSec=document.getElementById('capSec');
capSec.addEventListener("click",function(event){
alert("3");
event.stopPropagation();
},true);
此時點擊捕獲按鈕：1 2 3
原因：<section>標簽的監聽事件中阻止了事件的傳播，因此<button>標簽的事件不會被捕獲執行。- 給冒泡事件示例中的<section>元素的監聽事件流中設置阻止事件的傳播，代碼如下：
var bubSec=document.getElementById('bubSec');
bubSec.addEventListener("click",function(event){
alert("3");
event.stopPropagation();
},false);
此時點擊冒泡按鈕：4 3
原因：首先是<button>標簽的事件，然后是<section>，因為<section>標簽的監聽事件中阻止了事件繼續冒泡，父級元素的事件不會被觸發。
