談起JavaScript的 事件旨别，事件冒泡、事件捕獲、阻止默認事件這三個話題被饿，無論是面試還是在平時的工作中四康，都很難避免。
事件捕獲階段：事件從最上一級標簽開始往下查找狭握，直到捕獲到事件目標(target)闪金。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽论颅。
1哎垦、冒泡事件：
事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)。通俗來講就是恃疯，就是當設(shè)定了多個div的嵌套時漏设；即建立了父子關(guān)系，當父div與子div共同加入了onclick事件時澡谭，當觸發(fā)了子div的onclick事件后愿题，子div進行相應(yīng)的js操作，但是父div的onclick事件同樣會被觸發(fā)蛙奖。
html:
<div>
<input type="button" value="事件冒泡"/>
</div>
js:
????var $input = document.getElementsByTagName("input")[0];
?????var $div = document.getElementsByTagName("div")[0];
?????var $body = document.getElementsByTagName("body")[0];
?????$input.onclick = function(e){
????????????this.style.border = "5px solid red"
????????????var e = e || window.e;
????????????alert("red")
??????}
??????$div.onclick = function(e){
????????????this.style.border = "5px solid green"
????????????alert("green")
??????}
??????$body.onclick = function(e){
????????????this.style.border = "5px solid yellow"
????????????alert("yellow")
??????}
效果：依次彈出”red“,"green","yellow"潘酗。這就是事件冒泡：觸發(fā)button這個元素，卻連同父元素綁定的事件一同觸發(fā)雁仲。
2仔夺、阻止事件冒泡
如果對input的事件綁定改為：
$input.onclick = function(e){
????this.style.border = "5px solid red"
????var e = e || window.e;
????alert("red")
????e.stopPropagation();
}
這個時候只會彈出”red“，因為阻止了事件冒泡攒砖。
3缸兔、事件捕獲：
從頂層元素到目標元素或者從目標元素到頂層元素，和事件冒泡是一個相反的過程吹艇。事件從最不精確的對象(document 對象)開始觸發(fā)惰蜜，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)受神。
$input.addEventListener("click", function(){
????this.style.border = "5px solid red";
????alert("red")
}, true)
$div.addEventListener("click", function(){
????this.style.border = "5px solid green";
????alert("green")
}, true)
$body.addEventListener("click", function(){
????this.style.border = "5px solid yellow";
????alert("yellow")
}, true)
這個時候依次彈出”yellow“,"green","red"抛猖。這就是事件的捕獲。
如果把addEventListener方法的第三個參數(shù)改成false鼻听，則表示只在冒泡的階段觸發(fā)财著，彈出的依次為：”red“,"green","yellow"。這是因為在W3C模型中撑碴，任何事件發(fā)生時撑教，先從頂層開始進行事件捕獲，直到事件觸發(fā)到達了事件源元素醉拓。然后伟姐，再從事件源往上進行事件冒泡收苏，直到到達document。
程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡愤兵，方法就是綁定事件時通過addEventListener函數(shù)倒戏，它有三個參數(shù)，第三個參數(shù)若是true恐似，則表示采用事件捕獲，若是false傍念，則表示采用事件冒泡矫夷。
ele.addEventListener('click',doSomething2,true)
true=捕獲
false=冒泡
