JS事件級別

事件是javascript和HTML交互的基礎, 任何文檔或者瀏覽器窗口發生的交互, 都要通過綁定事件進行交互；比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行爲都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發條件和觸發效果。

接下來我們來了解一下DOM事件的那些屬性和方法。

DOM事件級別：
DOM級別一共可以分爲四個級別：DOM0級、DOM1級、DOM2級和DOM3級。而DOM事件分爲3個級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理。

你也許會疑惑，爲什麼沒有DOM1級事件處理呢？因爲1級DOM標準並沒有定義事件相關的內容，所以沒有所謂的1級DOM事件模型。

1、DOM0級事件

在理解DOM0級事件之前，我們有必要了解一下HTML事件處理程序，也是最早的一種事件處理方式：

<button type="button" onclick="show()"></button>
<script>
	function show() {
      alert('Hello World');
   }
</script>

以上的代碼，我們通過直接在HTML代碼裏面定義了一個 onclick 屬性觸發show這個事件處理函數，它最大的缺點就是HTML和JS耦合太強，我們如果需要修改函數名就必須修改兩個地方，優點是不需要操作DOM來完成事件的綁定。

DOM0 級處理事件就是將一個函數賦值給一個事件處理屬性。

<button id="btn" type="button"></button>
<script>
	var btn = document.getElementById('btn');
    btn.onclick = function() {
        console.log('Hello World');
    }
</script>

以上的代碼我們給button設置一個id屬性，然後獲取到這個id對象，再給這個對象綁定一個onclick事件，這個onclick事件會觸發賦值的對應函數，這樣的事件處理方法就是 DOM0 級。
最後我們可以通過給事件處理屬性賦值null來解綁事件，即 btn.onclick = null。

DOM0級事件處理程序的缺點在於一個處理程序無法同時綁定多個處理函數，比如我還想再點擊按鈕事件上加上另外一個函數。

2、DOM2級事件

DOM2級事件在DOM0級事件的基礎，彌補無法DOM0級事件無法同時綁定多個處理函數的缺點，它允許給一個事件添加多個處理函數。

<button id="btn" type="button"></button>
<script>
	var btn = document.getElementById('btn');   
    function show() {
        alert('Hello World');
    }    
    btn.addEventListener('click', show, false); // 綁定事件
    // btn.removeEventListener('click', show, false); // 解綁事件 
</script>

DOM2級事件定義了 addEventListener 和 removeEventListener 兩個方法，分別用來綁定和解綁事件，方法中包含三個參數，分別是綁定的事件處理的屬性名稱（沒有on前綴）處理函數和是否在捕獲時候執行事件處理函數。
如果我們還需要添加一個鼠標的移入的事件，只需要：

btn.addEventlistener('mouseover',show, false);

這樣，點擊按鈕和鼠標移入時候都將觸發 show 方法。

需要注意的是IE8以下版本不支持 addEventlistener 和 removeEventListerner，而需要使用 attachEvent 和 detachEvent 實現（有on前綴）：

btn.attachEvent('onclick', show); // 綁定事件 
btn.detachEvent('onclick', show); // 解綁事件
// 這裏不需要傳入第三個參數，因爲IE8以下版本只支持冒泡型事件。

3、DOM3級事件

DOM3 級事件在 DOM2 級事件的基礎上添加了更多的事件類型，全部類型如下：

UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll
焦點事件，當元素獲得或失去焦點時觸發，如：blur、focus
鼠標事件，當用戶通過鼠標在頁面執行操作時觸發如：click、dbclick、mouseup
滾輪事件，當使用鼠標滾輪或類似設備時觸發，如：mousewheel
文本事件，當在文檔中輸入文本時觸發，如：textInput
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keyup、keypress
合成事件，當爲IME（輸入法編輯器）輸入字符時觸發，如：compositionstart
變動事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified

同時DOM3級事件也允許使用者自定義一些事件。

可以瀏覽我的另一篇筆記 JS筆記之自定義事件。