衆所周知，事件流分爲三個階段冒泡分爲捕獲階段，目標階段和冒泡階段，
這三個階段到底是如何運行的呢？如果給同一個事件綁定上冒泡和捕獲的事件到底會怎樣觸發呢？
下面我用dom2級事件函數來變換捕獲和冒泡，用eventPhase來判斷事件的是捕獲，還是目標階段，還是捕獲，
document.addEventListener(事件,function ,true or false); true代表捕獲，false代表冒泡事件
目標對象.eventPhase如果顯示1代表捕獲階段，2代表目標階段3是冒泡階段
基於上述代碼我寫出瞭如下的測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn" onclick="testt()">點我啊</button>
<script>
function testt(){
console.log("事件零級處理程序");
}
document.getElementById('btn').addEventListener('click',function (e) {
console.log('2級事件處理程序ture');
console.log(e.eventPhase);
},true)
document.body.addEventListener('click',function (e) {
console.log('2級事件處理程序turebody');
console.log(e.eventPhase);
},true);
document.documentElement.addEventListener('click',function (e) {
console.log('2級事件處理程序turedocumentElement');
console.log(e.eventPhase);
},true);
document.addEventListener('click',function (e) {
console.log('2級事件處理程序turedocument');
console.log(e.eventPhase);
},true);
window.addEventListener('click',function (e) {
console.log('2級事件處理程序turewindow');
console.log(e.eventPhase);
},true);
document.getElementById('btn').onclick=function (e) {
console.log('0級事件處理程序');
console.log(e.eventPhase);}
document.getElementById('btn').addEventListener('click',function (e) {
console.log('2級事件處理程序false');
console.log(e.eventPhase);
},false)
document.body.addEventListener('click',function (e) {
console.log('2級事件處理程序falsebody');
console.log(e.eventPhase);
},false);
document.documentElement.addEventListener('click',function (e) {
console.log('2級事件處理程序falsedocumentElement');
console.log(e.eventPhase);
},false);
document.addEventListener('click',function (e) {
console.log('2級事件處理程序falsedocument');
console.log(e.eventPhase);
},false);
window.addEventListener('click',function (e) {
console.log('2級事件處理程序falsewindow');
console.log(e.eventPhase);
},false);
</script>
</body>
</html>
從上面可以明確地看出噹噹鼠標單擊時，事件最先從window的捕獲階段開始再到目標階段再到冒泡階段，這也就清楚地解釋了，爲什麼有的時候在打出
`document.getElementById('btn').addEventListener('click',function (e) {
console.log('2級事件處理程序ture');
console.log(e.eventPhase);
},true)
類似如上的代碼時eventPhase會返回2而不返回1的問題，因爲事件已經由window這一最不具體的對象捕獲到button這個最具體的對象了，已經是目標階段了所以就返回了2，無視了true的設定，false也同理，但是在同一階段內true還是比false要靠前的。
從結果可以看出零級事件處理程序在目標階段的優先級比2級事件處理程序要高，因爲html事件處理程序會被零級事件處理程序覆蓋，所以我又測試了一下，html事件處理程序的優先級也在2級事件處理程序之前。
所以事件的觸發是由捕獲從不具體到具體，再有具體到不具體分爲三個階段分別是捕獲，目標，冒泡階段。