DOM事件類詳解，有這一篇就夠了

DOM事件的級别

1. DOM0 element.onclick = function(){}
2. DOM2 element.addEventListener(‘click’, funttion(){}, false)
3. DOM3 element.addEventListener(‘keyup’, funttion(){}, false)

DOM3 較 DOM2 多了很多事件類型

DOM事件流

概念： 完成的時間流分三個階段，捕獲、目标階段、冒泡；

事件通過捕獲到達目标元素，再從目标元素冒泡至window對象的過程就是事件流。

捕獲：是由上至下的過程，那麼事件流最先接觸哪個對象呢？

答案是window對象，其次是document>>html标簽>> body>>…… >>目标元素

冒泡則相反

Event 對象的常見應用

1. event.preventDefault()

阻止預設事件，比如阻止a标簽跳轉

1. event.stopPropagation()

阻止冒泡行為

1. event.stoplmmediatePropagation()

若一個dom元素綁定了兩個點選事件a、b，若點選該元素，隻想執行其中一個事件a，而阻止事件b，在a中的函數添加該行代碼即可，屬于事件響應的優先級

1. event.target

當5個子元素 都要綁定一個行為，為了優化我們利用事件委托，可以在其父元素上綁定該行為，并通過event.target尋找觸發事件的父元素的子元素

1. event.currentTarget

仍是4的例子，可以找到目前綁定事件的對象，就是4步驟的父元素，而非子元素

自定義事件

var eve = new Event（'custome'）
element(dom節點).addEventListen('custome', function(){})
element(dom節點).dispatchEvent(eve)

**注意** Event 可以替換為 CustomEvent，差別在于CustomEvent可以接受一個對象參數
           

另外為了提高大家對捕獲過程的了解：請觀察如下代碼就很明白了從上至下的捕獲過程，冒泡反之

var ele = document.getElementById('id')

window.addEventListen('click',function(){console.log('觸發了window層')}, true)  //第三個參數預設為false，執行冒泡機制，true為捕獲階段
document.addEventListen('click',function(){console.log('觸發了document層')}, true) 
document.documentElement.addEventListen('click',function(){console.log('觸發了html層')}, true) 
document.body.addEventListen('click',function(){console.log('觸發了boy層')}, true)
ele.addEventListen('click',function(){console.log('觸發了element元素層')}, true)

點選element元素，依次列印 觸發了 window、document、html、body、元素本身；綁定先後順序無影響。