DOM 事件是處理 Web 頁面交互的基礎，是掌握前端開發技術的基礎。 DOM 事件模型包括 4 個級別的規範：DOM0級，DOM1級，DOM2級和 DOM3級。 DOM1標準中不涉及事件。 1.DOM0級事件 DOM0 級事件處理就是將一個函數賦值給一個事件處理屬性，如下 <button type ...
DOM 事件是處理 Web 頁面交互的基礎，是掌握前端開發技術的基礎。
DOM 事件模型包括 4 個級別的規範：DOM0級，DOM1級，DOM2級和 DOM3級。 DOM1標準中不涉及事件。
1.DOM0級事件
DOM0 級事件處理就是將一個函數賦值給一個事件處理屬性，如下
<button type="button" onclick="showFn()"></button>
<script>
function showFn() {
alert('Hello World');
}
</script>
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('Hello World');
}
// btn.onclick = null; 解綁事件
</script>
優點：
簡單快速
缺點：
1、是HTML於JS 強耦合，綁定在一起
2、一個處理程式無法同時綁定多個處理函數
2.DOM2級事件
DOM2級標準中，事件定義了addEventListener和removeEventListener兩個方法，分別用來綁定和解綁事件。
方法中包含3個參數，分別是綁定的事件處理屬性名稱（不包含on）、處理函數和是否在捕獲時執行事件處理函數。
DOM2級事件允許給一個處理程式添加多個處理函數。代碼如下：
<button id="btn" type="button"></button>
<script>
var btn = document.getElementById('btn');
function showFn() {
alert('Hello World');
}
btn.addEventListener('click', showFn, false);
btn.addEventListener('mouseover', showFn, false); // 添加一個滑鼠移入的方法
// btn.removeEventListener('click', showFn, false); 解綁事件
</script>
如果是 IE8 以下需要用attachEvent和detachEvent來實現
btn.attachEvent('onclick', showFn); // 綁定事件
btn.detachEvent('onclick', showFn); // 解綁事件
\\ 這裡我們不需要傳入第三個參數，因為IE8級以下版本只支持冒泡型事件。
3.DOM3級事件
DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，全部類型如下：
UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll
焦點事件，當元素獲得或失去焦點時觸發，如：blur、focus
滑鼠事件，當用戶通過滑鼠在頁面執行操作時觸發如：dbclick、mouseup
滾輪事件，當使用滑鼠滾輪或類似設備時觸發，如：mousewheel
文本事件，當在文檔中輸入文本時觸發，如：textInput
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keypress
合成事件，當為IME（輸入法編輯器）輸入字元時觸發，如：compositionstart
變動事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified
同時DOM3級事件也允許使用者自定義一些事件。
DOM事件流
上文中講到了addEventListener的第三個參數為指定事件是否在捕獲階段執行，設置為true表示事件在捕獲階段執行，而設置為false表示事件在冒泡階段執行。那麼什麼是事件冒泡和事件捕獲呢？可以用下圖來解釋：
1.事件冒泡
所謂事件冒泡就是事件像泡泡一樣從最開始生成的地方一層一層往上冒，比如上圖中a標簽為事件目標，點擊a標簽後同時也會觸發p、li上的點擊事件，一層一層向上直至最外層的html或document。下麵是代碼示例：
上面的代碼運行後我們點擊a標簽，首先會彈出’我是目標事件’提示，然後又會彈出’事件冒泡至DIV’的提示，這便說明瞭事件自內而外向上冒泡了。
那麼我們如何阻止事件冒泡呢？這裡就涉及事件的Event對象中的stopPropagation方法，如下：
child.addEventListener('click', function(e) {
alert('我是目標事件');
e.stopPropagation();
}, false);
加上stopPropagation方法後，我們再次點擊a標簽就不會觸發div上的click事件了。
2.事件捕獲
和事件冒泡相反，事件捕獲是自上而下執行，我們只需要將addEventListener的第三個參數改為true就行。
