一、基本概念：DOM事件的級別

// DOM0
element.onclick=function(){}
// DOM2, 新增了冒泡和捕獲
element.addEventListener('click',function(){}, false)
// DOM3, 新增更多事件類型 鼠標、鍵盤等
element.addEventListener('keyup',function(){}, false)

二、DOM事件模型

捕獲和冒泡

三、DOM事件流

事件流：瀏覽器再頁面做交互的過程中，比如點擊鼠標左鍵，這個左鍵如何傳遞到頁面上，就是事件流
完整事件流： 捕獲 → 目標階段 → 冒泡

四、描述DOM事件捕獲的具體流程

1. 事件捕獲：是從上到下的過程
2. 第一個接收事件的對象是window
3. 具體流程： window → document → html → body → … (按照html結構往下傳遞) → 目標元素

<!-- 模擬DOM時間的捕獲的具體流程 --><div id="eve"><style>#eve {width: 100px;height: 100px;background-color: aqua;text-align: center;line-height: 100px;font-size: 20px;}</style>目標元素</div><script type="text/javascript">var ev = document.getElementById('eve');ev.addEventListener('click', function() {console.log('目標元素');}, true);document.body.addEventListener('click', function() {console.log('body');}, true);document.addEventListener('click', function() {console.log('document');}, true);window.addEventListener('click', function() {console.log('window');}, true);document.documentElement.addEventListener('click', function() {console.log('html');}, true);</script>

4. 如何使用js獲取html節(jié)點：document.documentElement

五、Event對象的常見應用

1. event.preventDefaylt() 阻止默認事件
   場景描述：比如有一個需求，再點擊a標簽時，做一些js邏輯，需要阻止a標簽的跳轉行為
2. event.stopPropagation() 阻止事件冒泡
   場景描述：父元素綁定事件A和子元素綁定事件B，我希望點擊子元素時，只觸發(fā)事件B， 不需要往上冒泡觸發(fā)父元素的事件A
3. event.stoplmmediatePropagation() 阻止事件冒泡 + 阻止相同事件監(jiān)聽被調用
   場景描述：假設一個元素同時綁定兩個click事件，再第一次執(zhí)行click事件時，執(zhí)行stoplmmediatePropagation，阻止冒泡的同時也阻止了第二個click時間

div.addEventListener("click" , function(){alert("第一次執(zhí)行");stopImmediatePropagation();
} , true);
?
div.addEventListener("click" , function(){alert("第二次執(zhí)行");
} , true); 
?
// 點擊div，第二次執(zhí)行不會觸發(fā)

4. event.currentTarget 獲取綁定事件的DOM對象
   場景描述：給ul綁定事件，event.currentTarget 獲取ul的dom對象

5. event.target 獲取實際觸發(fā)事件的DOM對象
   場景描述：給多個li標簽綁定click事件，一般情況下會循環(huán)li節(jié)點，給每一個li綁定事件。這種情況會消耗大量的性能，可以通過事件委托的方式，把所有l(wèi)i事件綁定到一個ul上，通過event.target獲取具體是哪一個li被點擊

六、自定義事件（模擬事件）

1. Event 自定義事件

var eve = new Event('custome');  // 聲明一個自定義事件對象
var dom = document.getElementById("dom");
// 給dom節(jié)點綁定自定義事件
dom.addEventListener('custome',function(){console.log('custome')
})
// 觸發(fā)自定義事件
dom.dispatchEvent(eve)
// custome

2. CustomEvent 自定義事件，可待參數(shù)

var eve = new CustomEvent('custome', {detail: {name: '張三', phone: '13751032412'}}); // 聲明一個自定義事件對象, 允許加參數(shù)
var dom = document.getElementById("dom");
// 給dom節(jié)點綁定自定義事件
dom.addEventListener('custome',function(e){console.log('參數(shù)', e.detail)
})
// 觸發(fā)自定義事件
dom.dispatchEvent(eve)
// 參數(shù) {name: '張三', phone: '13751032412'}