#Javascript# 事件的傳播機制

<div id="outer">
    <div id="inner"></div>
</div>
document.body.onclick = function(){
console.log('body');
}
outer.onclick = function(){
console.log('outer');
}

inner.onclick = function(){
console.log('inner');// inner  outer  body
}

事件傳播有三個階段（捕獲--目標--冒泡）
Event.prototype
0: none 默認值，不表明任何的意思
1：capturing_phase:捕獲階段
2：at_target:目標階段（當前事件源）
3：bubbling_phase:冒泡階段

三個階段處理的事情
點擊inner，觸發了inner的click事件
瀏覽器在執行inner的click綁定的方法以前
1.從整個頁面document開始向內查找，把inner的祖先元素遍歷一遍（爲冒泡階段的傳播途徑作準備）
2.接下來找到目標階段找到當前事件源。把事件源上綁定的方法執行（沒綁定方法就不執行了）
3.不只觸發了當前事件源的點擊行爲，並且瀏覽器會按照第一個階段規劃的傳播路徑，從內向外（inner -> outer->body->html->document）把祖先元素的click行爲依次觸發。

當前元素的某個事件行爲被觸發，它全部的祖先元素，相關的事件行爲也會被依次觸發，順序是從內向外。若是祖先元素的這個行爲綁定了方法，綁定的方法也會被觸發執行，咱們把事件的這種傳播機制叫作冒泡傳播

這個傳播機制是全部瀏覽器的傳播機制。