事件流介紹
事件流描述了頁(yè)面接受事件的順序。事件流定義了事件冒泡和事件捕獲。
事件冒泡是指事件從最具體的元素開始接觸，然后向上傳播至沒(méi)有那么具體的元素（文檔）
事件捕獲的目的是為了在事件最終達(dá)到最終目標(biāo)前進(jìn)行攔截。事件捕獲實(shí)際上是指從沒(méi)有那么具體的元素到最后具體的元素的過(guò)程墅冷。瀏覽器一般是從window對(duì)象開始
DOM事件流
DOM2EVENTS規(guī)范規(guī)定事件流分為三個(gè)節(jié)點(diǎn):事件捕獲，到達(dá)目標(biāo)或油，事件冒泡
DOM0事件處理流程
在JavaScript中指定事件處理程序的傳統(tǒng)方式是把一個(gè)函數(shù)賦值給（dom元素）一個(gè)事件處理程序?qū)傩阅蕖Ｃ總€(gè)元素都有事件處理程序?qū)傩裕热鏾nclick.
let btn = document.getElementById("btn")
btn.onClick= function(){
console.log(this)
}
注意：上述函數(shù)方法中的this指向的是元素本身顶岸，即Button元素腔彰。
DOM1處理事件程序
DOM2 Event為事件處理程序的賦值和移除提供了兩個(gè)方法 addEventListener removeListener叫编。這兩個(gè)方法暴露在DOM節(jié)點(diǎn)上面。他們接受三個(gè)參數(shù)霹抛，事件名稱搓逾，事件處理函數(shù)和一個(gè)布爾值。當(dāng)布爾值為true的時(shí)候杯拐，代表事件的觸發(fā)會(huì)出現(xiàn)在捕獲階段霞篡，布爾值為false,表示事件的觸發(fā)生在冒泡階段。addEventListener和removeListener 的處理事件函數(shù)樣式必須一樣才能達(dá)到移除效果藕施，如果addEventListener添加多次寇损，那么事件處理函數(shù)也會(huì)觸發(fā)多次。
注意：為了讓事件能夠回收裳食。當(dāng)事件所在的元素已經(jīng)刪除，最好把事件也設(shè)置為null
事件對(duì)象
在DOM合規(guī)的瀏覽器中芙沥，event對(duì)象是傳給事件處理程序的唯一參數(shù)诲祸。不管是使用何種方式處理，都會(huì)傳入event事件對(duì)象而昨。事件對(duì)象的屬性有以下救氯。
bubbless:事件是否冒泡
cacelable:表示是否可以取消事件的默認(rèn)行為
currentTarget:當(dāng)前事件處理所在的元素
defaultPrevented:true表示已經(jīng)調(diào)用preventDefault方法（表示取消某些元素的特定行為，比如a標(biāo)簽的跳轉(zhuǎn)）
detail:事件相關(guān)屬性歌憨，比如單機(jī)兩次着憨，detail會(huì)變成2，光標(biāo)出去了會(huì)自動(dòng)變?yōu)?
eventPhase:表示調(diào)用事件處理程序的階段 1代表捕獲階段 2代表到達(dá)目標(biāo) 3代表冒泡階段
preventDefault():用于取消事件的默認(rèn)行為 cancelable為true才能調(diào)用這個(gè)方法
stopImmediatePropagation:取消所有后續(xù)事件捕獲或者事件冒泡务嫡，并阻止調(diào)用人格后續(xù)的事件
stopPropagation:取消所有后續(xù)事件捕獲或者事件冒泡甲抖，只有bubbles為true才可以調(diào)用
target:事件的目標(biāo)
type:代表事件的類型
事件類型
事件可以分為以下幾種類型
用戶界面事件
焦點(diǎn)事件
鼠標(biāo)事件
滾輪事件
輸入事件
鍵盤事件
用戶界面事件
用戶界面數(shù)據(jù)一般是指界面事件或者UI事件：比如onload，unload
onload事件表示文檔已經(jīng)下載完成或者圖片下載完成心铃。圖片只要設(shè)置了src屬性准谚，那么久會(huì)觸發(fā)onload事件
unload：表示文檔已經(jīng)卸載了就會(huì)觸發(fā)這個(gè)事件
resize:當(dāng)瀏覽器窗口縮放到一個(gè)新的高度或者寬度就會(huì)觸發(fā)這個(gè)事件
scroll:頁(yè)面中相關(guān)元素發(fā)生變化就會(huì)觸發(fā)這個(gè)事件
焦點(diǎn)事件
blur:當(dāng)元素失去焦點(diǎn)時(shí)候觸發(fā)
focus:當(dāng)元素獲得焦點(diǎn)的時(shí)候觸發(fā)
鼠標(biāo)和滾輪事件
click:用戶點(diǎn)擊鼠標(biāo)主鍵時(shí)候觸發(fā)
dbclick:雙擊觸發(fā)
mosedown:按下鼠標(biāo)任意按鍵觸發(fā),該事件不能通過(guò)鍵盤觸發(fā)
moseenter:鼠標(biāo)光標(biāo)從元素外部移動(dòng)到元素內(nèi)部觸發(fā)
mouseleave:鼠標(biāo)從元素內(nèi)部移動(dòng)到元素外部觸發(fā)
事件距離相關(guān)屬性
pageX,pageY :光標(biāo)在頁(yè)面中的位置
clientX,clientY:代表光標(biāo)距離視口的位置
screentX,screenY:表示光標(biāo)距離桌面的距離
offsetX,offsetY:表示光標(biāo)距離目標(biāo)元素的距離
事件委托
過(guò)得的事件處理程序需要用到事件委托。事件委托需要一個(gè)共同的目標(biāo)元素去扣。事件委托主要是通過(guò)事件冒泡到相同的元素上面柱衔，在通過(guò)事件的target，來(lái)區(qū)分不同元素的事件愉棱。
