Dom事件模型

Dom事件模型，是Dom事件規範的一種。

主要有：

1. DOM0 級事件處理程序 | DOM基本事件模型
2. DOM2 級事件處理程序
3. IE獨有的事件模型
4. DOM3 級帶傷處理程序

DOM0是Dom事件定義的原始階段，也是最混亂的，但兼容性也是最高的。

DOM0

就是on的方式綁定事件，包括：

1. HTML 中 on

<button type="button" onclick="test()">點擊</button>

2. JS中的on

document.getElementsByTagName("button")[0].onclick = function () {
	console.log(1);
};

Dom1級事件是沒有定義的，所以沒有。

DOM2

主要有：

1. addEventListener(eventType, listener[, useCapture])
2. removeEventListener(eventType, listener[, useCapture])

eventType ————> 事件名稱，大小寫敏感
listener ————> 監聽函數
useCapture ————> 可選參數，默認false，表示監聽函數只在冒泡階段被觸發。

DOM level 2模型屬於W3C標準模型，現代瀏覽器都支持該模型。在該事件模型中，一次事件共有三個過程：

1. 事件捕獲階段（Capturing Phase）：事件從document一直向下傳播到目標元素，依次檢查經歷過的節點是否綁定了事處監聽函數（事件處理程序），如果有則執行，反之不執行

2. 事件處理階段（Target Phase）：事件到達目標元素，觸發目標元素的監聽函數，這個是沒有固有有的順序之分的，按照添加的先後順序執行

3. 事件冒泡階段（Bubbling Phase）：事件從目標元素冒泡到document，依次檢查經過的節點是否綁定了事件監聽函數，如果有則執行，反之不執行。

IE事件模型

在IE事件模型中，需要使用attachEvent()和detachEvent()方法來觸發事件和移除事件。在IE事件模型中，其有兩個過程：

1. 事件處理階段（Target Phase）：事件到達目標元素，觸發目標元素的監聽函數

2. 事件冒泡階段（Bubbling Phase）：事件從目標元素冒泡到document，依次檢查經過的節點是否綁定了事件監聽函數，如果有則執行

這裏沒有指定 useCapture ，默認是 false，即捕獲。

DOM3

DOM Level 3事件模型是DOM Level 2的事件模型的升級版，在DOM Level 2事件模型的基礎上添加了更多的事件類型：

1. UI事件：當用戶與頁面上的元素交互時觸發，如：load、scroll

2. 焦點事件：當元素獲得或失去焦點時觸發，如：blur、focus

3. 鼠標事件：當用戶通過鼠標在頁面執行操作時觸發如：dbclick、mouseup

4. 滾輪事件：當使用鼠標滾輪或類似設備時觸發，如：mousewheel

5. 文本事件：當在文檔中輸入文本時觸發，如：input、change

6. 鍵盤事件：當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keypress

7. 合成事件：當爲IME（輸入法編輯器）輸入字符時觸發，如：compositionstart

8. 變動事件：當底層DOM結構發生變化時觸發，如：DOMsubtreeModified

同時DOM3級事件也允許使用者自定義一些事件。在自定義事件稱之爲自定義事件模型。