在JS中，綁定的事件默認的執行時間是在冒泡階段執行，而非在捕獲階段（重要），這也是為什么當父類和子類都綁定了某個事件，會先調用子類綁定的事件，后調用父類的事件。直接看下面實例
<!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;} </style> </head> <body> <div id="id1" style="height:400px; border:1px solid #000;"> <div id="id2" style="height:200px; border:1px solid #000;"> <div id="id3" style="height:50px; border:1px solid #000;"></div> </div> </div> </body> <script type="text/javascript"> var obj1=document.getElementById('id1'); obj1.addEventListener('click',function(){ alert('id1'); },false); var obj2=document.getElementById('id2'); obj2.addEventListener('click',function(){ alert('id2'); },true); var obj3=document.getElementById('id3'); obj3.addEventListener('click',function(){ alert('id3'); },true); /*如果第三個參數為true，則事件在捕獲階段執行，如果第三個參數為false，則事件在冒泡階段執行*/ </script> </html>
當點擊id3元素時候，執行結果是：id2，id3，id1
解析：因為obj2與obj3綁定的方法在捕獲階段執行，obj1的事件在冒泡階段執行。
總結
在JS中，綁定的事件默認的執行時間是在冒泡階段執行，而非在捕獲階段，必須要理解
不過我們可以通過綁定事件時，指定事件執行時間是在冒泡階段還是捕獲階段。
obj.addEventListener(event,function(){},bool)
bool:false，代表冒泡階段執行
bool:true，代表捕獲階段執行
JS在默認情況下獲取事件后，就開始從根元素開始捕獲所有該事件的監聽對象，然后在冒泡階段逐一執行。捕獲階段是在冒泡階段前面
阻止冒泡
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true；
阻止默認行為
w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;
關於JS 事件冒泡和onclick,click,on()事件觸發順序
onclick,click,on()的優先關系：onclick>click>on()；
onclick和click綁定的事件，彼此之間遵守事件冒泡規則，從內到外觸發；
on()綁定的事件，總是晚於onclick和click綁定的事件觸發；