一、DOM事件的級別
DOM事件分爲三個級別，分別是0級、2級和3級事件。
分別長這樣：
0級事件：
Element.onclick = function(){};
2級事件:
Element.addEventListener('click',function(){},false);
3級事件：
Element.addEventListener('keyup',function(){},false)
其中，addEventListener()方法的最後一個參數接收一個布爾值，true表示該事件在捕獲階段觸發，false表示在冒泡階段觸發。二、DOM事件模型
DOM事件模型就是捕獲和冒泡機制。
三、DOM事件流
所謂事件流，就是比如當在一個元素上綁定了一個點擊事件，當點擊該對象時，瀏覽器在背後做了三件事情。
1.事件捕獲，從最頂層的window對象到目標對象一層層的檢查，舉個例子
<!DOCTYPE html>
<html>
<head>
<title>DOM事件流</title>
</head>
<body>
<div id="ev">
<style type="text/css">
#ev{
width: 300px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
color: #fff;
}
</style>
目標元素
</div>
<script type="text/javascript">
window.addEventListener('click',function(){
console.log('window')
},true);
document.addEventListener('click',function(){
console.log('document')
},true);
document.documentElement.addEventListener('click',function(){
console.log('documentElement')
},true);
document.body.addEventListener('click',function(){
console.log('body')
},true);
document.getElementById('ev').addEventListener('click',function(){
console.log('ev')
},true);
</script>
</body>
</html>控制檯的輸出內容是
//window
//document
//documentElement
//body
//ev可以看出，事件流的經過是先到window > document >documentElement(html節點) >body >目標元素
如果在捕獲是發現某個節點也綁定了相同事件，會先觸發。
然後在目標階段觸發綁定響應事件事件。
最後從目標元素按捕獲的相反路徑冒泡。
四、Event對象的常見應用
1.Event.preventDefault();阻止默認行爲
2.Event.stopPropagation();阻止冒泡
3.Event.stopImmediatePropagation();
該方法區別於法2.作用是在執行完當前事件處理程序之後，停止當前節點以及所有後續節點的事件處理程序的運行。
假如在某個節點上定義了多個事件，那麼方法2會將這些事件都執行完，而不會去冒泡。
方法3是如果在某個事件中設定了stopImmediatePropagation，那麼在該事件的後續設置的事件都不會執行。
4.Event.currentTarget
5.Event.target
currentTarget和target屬性的區別：
Event.target返回觸發事件的元素
Event.currentTarget返回綁定事件的元素
作用是什麼：
Event.target常用於事件委託。就是比如當需要給一串li元素用for循環綁定事件時，可以使用事件委託來優化。
舉個例子
<body>
<ul id="ev">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script type="text/javascript">
var ev = document.getElementById('ev');
ev.onclick = function(event){
var target = event.target;
if (target.nodeName.toLowerCase() === 'li') {
console.log(target.innerHTML)
}
}
</script>
</body>
</html>五、自定義事件
自定義事件的話主要利用new Evnet()來構造一個自定義事件，用dispatch()方法來觸發該事件。
舉個例子：
var myEvent = new Event('my-event');
Element.addEventListener('my-event',function(){
//do something
},true)
Element.dispatch(myEvent);但是new Event構造函數只能指定事件名，不能綁定數據。如果需要綁定數據，就要用到CustomEvent()方法。
*CustomEvent()方法
CustomEvent()構造函數語法
var myEvent = new customEvent(EventName,detail,bubble,cancelBubble);
參數詳解：
EventName：事件名的字符串
detail：綁定在Event對象上的數據，可以是任意類型。
bubble：事件是否冒泡
cancelBubble：事件是否可取消但是在IE上並不支持上述兩個API。可以參考IE中的寫法裏面的IE的API。
簡單來說IE中自定義事件主要是使用三個方法
document.createEvent()
document.initEvent();
document.dispatch();