事件是javascript和HTML交互基礎(chǔ), 任何文檔或者瀏覽器窗口發(fā)生的交互, 都要通過綁定事件進(jìn)行交互;比如鼠標(biāo)點(diǎn)擊事件棍潘、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果锦聊。
本文就將帶大家深入淺出地了解DOM事件的那些屬性和方法当编。
1.DOM級別與DOM事件：
DOM級別一共可以分為四個級別：DOM0級、DOM1級族壳、DOM2級和DOM3級憔辫。而DOM事件分為3個級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理仿荆。
有人可能會疑惑贰您，為什么沒有DOM1級事件處理呢坏平？因?yàn)?級DOM標(biāo)準(zhǔn)并沒有定義事件相關(guān)的內(nèi)容，所以沒有所謂的1級DOM事件模型锦亦。
1.DOM0級事件之前舶替，我們有必要了解一下HTML事件處理程序，也是最早的一種事件處理方式
<button type="button" onclick="showFn()"></button>
function showFn() {
alert('Hello World');
}
以上的代碼杠园，我們通過直接在HTML代碼里面定義了一個 onclick屬性觸發(fā)showfu這樣的事件處理程序最大的缺點(diǎn)就是HTML和JS耦合太強(qiáng)坎穿，我們?nèi)绻枰薷暮瘮?shù)名就必須修改兩個地方，優(yōu)點(diǎn)是不需要操作DOM來完成事件的綁定返劲。
DOM0級處理事件就是將一個函數(shù)賦值給一個事件處理屬性玲昧。
<button id="btn" type="button"></button>
var btn = document.getElementById('btn');
btn.onclick = function() {
console.log('Hello World');
}
以上的代碼我們給button定義了一個id 通過js原生的api獲取按鈕
將一個函數(shù)賦值給了一個事件處理屬性onclick 這樣的方法就是DOM0級
處理事件的體現(xiàn)。我們可以通過給事件處理屬性賦值null來解綁事件篮绿。
DOM0級事件處理程序的缺點(diǎn)在于一個處理程序無法同時綁定多個處理函數(shù)孵延，比如我還想再點(diǎn)擊按鈕事件上加上另外一個函數(shù)。
2.DOM2級事件
DOM2級事件在DOM0級時間段額基礎(chǔ)上彌補(bǔ)了一個處理處理程序
無法同時綁定多個處理函數(shù)的缺點(diǎn)亲配。允許給一個程序添加多個處理函數(shù)尘应。
<button id="btn" type="button"></button>
var btn = document.getElementById('btn');
function showFn() {
alert('Hello World');
}
btn.addEventListener('click', showFn, false);
// btn.removeEventListener('click', showFn, false); 解綁事件
DOM2級事件定義了addEventListener 和 removeEventListener兩個方法，分別用來綁定和解綁事件吼虎，方法中包含三個參數(shù)犬钢，分別是綁定的事件處理的屬性名稱（沒有on）處理函數(shù)和是否在捕獲時候執(zhí)行事件處理函數(shù)如果我們還需要添加一個鼠標(biāo)的移入的方法，只需要：
btn.addEventlistener('mouseover',showfn,false)
這樣思灰，點(diǎn)擊按鈕和鼠標(biāo)移入時候都將觸發(fā)showfn的方法玷犹。
需要注意的是IE8以下版本不支持 addEventlistener 和 removeEventListerner
需要使用attachEvent和detachEvent實(shí)現(xiàn)：
btn.attachEvent('onclick', showFn); // 綁定事件
btn.detachEvent('onclick', showFn); // 解綁事件
這里我們不需要傳入第三個參數(shù)，因?yàn)镮E8以下版本只支持冒泡型事件洒疚。
3.DOM3級事件
DOM3級事件是在DOM2級事件的基礎(chǔ)上添加很多事件類型歹颓。
UI事件，當(dāng)用戶與頁面上的元素交互時觸發(fā)油湖，如：load巍扛、scroll
焦點(diǎn)事件，當(dāng)元素獲得或失去焦點(diǎn)時觸發(fā)乏德，如：blur撤奸、focus
鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面執(zhí)行操作時觸發(fā)如：dbclick喊括、mouseup
滾輪事件胧瓜，當(dāng)使用鼠標(biāo)滾輪或類似設(shè)備時觸發(fā)，如：mousewheel
文本事件瘾晃，當(dāng)在文檔中輸入文本時觸發(fā)贷痪，如：textInput
鍵盤事件幻妓，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)蹦误，如：keydown劫拢、keypress
合成事件，當(dāng)為IME（輸入法編輯器）輸入字符時觸發(fā)强胰，如：compositionstart
變動事件舱沧，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)，如：DOMsubtreeModified
同時DOM3級事件也允許使用者自定義一些事件偶洋。
