一、事件與事件流 javascript中的事件，可以理解就是在HTML文檔或者瀏覽器中發生的一種交互操作，使得網頁具備互動性， 常見的有載入事件、滑鼠事件、自定義事件等 由於DOM是一個樹結構，如果在父子節點綁定事件時候，當觸發子節點的時候，就存在一個順序問題，這就涉及到了事件流的概念 事件流都會經 ...
一、事件與事件流
javascript中的事件，可以理解就是在HTML文檔或者瀏覽器中發生的一種交互操作，使得網頁具備互動性， 常見的有載入事件、滑鼠事件、自定義事件等
由於DOM是一個樹結構，如果在父子節點綁定事件時候，當觸發子節點的時候，就存在一個順序問題，這就涉及到了事件流的概念
事件流都會經歷三個階段：
- 事件捕獲階段(capture phase)
- 處於目標階段(target phase)
- 事件冒泡階段(bubbling phase)
事件冒泡是一種從下往上的傳播方式，由最具體的元素（觸發節點）然後逐漸向上傳播到最不具體的那個節點，也就是DOM中最高層的父節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling</title>
</head>
<body>
<button id="clickMe">Click Me</button>
</body>
</html>
然後，我們給button和它的父元素，加入點擊事件
var button = document.getElementById('clickMe');
button.onclick = function() {
console.log('1.Button');
};
document.body.onclick = function() {
console.log('2.body');
};
document.onclick = function() {
console.log('3.document');
};
window.onclick = function() {
console.log('4.window');
};
點擊按鈕，輸出如下
1.button 2.body 3.document 4.window
點擊事件首先在button元素上發生，然後逐級向上傳播
事件捕獲與事件冒泡相反，事件最開始由不太具體的節點最早接受事件, 而最具體的節點（觸發節點）最後接受事件
二、事件模型
事件模型可以分為三種：
- 原始事件模型（DOM0級）
- 標準事件模型（DOM2級）
- IE事件模型（基本不用）
原始事件模型
事件綁定監聽函數比較簡單, 有兩種方式：
- HTML代碼中直接綁定
<input type="button" onclick="fun()">
- 通過
JS代碼綁定
var btn = document.getElementById('.btn');
btn.onclick = fun;
特性
- 綁定速度快
DOM0級事件具有很好的跨瀏覽器優勢，會以最快的速度綁定，但由於綁定速度太快，可能頁面還未完全載入出來，以至於事件可能無法正常運行
-
只支持冒泡，不支持捕獲
-
同一個類型的事件只能綁定一次
<input type="button" id="btn" onclick="fun1()">
var btn = document.getElementById('.btn');
btn.onclick = fun2;
如上，當希望為同一個元素綁定多個同類型事件的時候（上面的這個btn元素綁定2個點擊事件），是不被允許的，後綁定的事件會覆蓋之前的事件
刪除 DOM0 級事件處理程式只要將對應事件屬性置為null即可
btn.onclick = null;
標準事件模型
在該事件模型中，一次事件共有三個過程:
- 事件捕獲階段：事件從
document一直向下傳播到目標元素, 依次檢查經過的節點是否綁定了事件監聽函數，如果有則執行 - 事件處理階段：事件到達目標元素, 觸發目標元素的監聽函數
- 事件冒泡階段：事件從目標元素冒泡到
document, 依次檢查經過的節點是否綁定了事件監聽函數，如果有則執行
事件綁定監聽函數的方式如下:
addEventListener(eventType, handler, useCapture)
事件移除監聽函數的方式如下:
removeEventListener(eventType, handler, useCapture)
參數如下：
eventType指定事件類型(不要加on)handler是事件處理函數useCapture是一個boolean用於指定是否在捕獲階段進行處理，一般設置為false與IE瀏覽器保持一致
舉個例子：
var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);
特性
- 可以在一個
DOM元素上綁定多個事件處理器，各自並不會衝突
btn.addEventListener(‘click’, showMessage1, false); btn.addEventListener(‘click’, showMessage2, false); btn.addEventListener(‘click’, showMessage3, false);
- 執行時機
當第三個參數(useCapture)設置為true就在捕獲過程中執行，反之在冒泡過程中執行處理函數
下麵舉個例子：
<div id='div'>
<p id='p'>
<span id='span'>Click Me!</span>
</p >
</div>
設置點擊事件
var div = document.getElementById('div');
var p = document.getElementById('p');
function onClickFn (event) {
var tagName = event.currentTarget.tagName;
var phase = event.eventPhase;
console.log(tagName, phase);
}
div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);
上述使用了eventPhase，返回一個代表當前執行階段的整數值。1為捕獲階段、2為事件對象觸發階段、3為冒泡階段
點擊Click Me!，輸出如下
P 3 DIV 3
可以看到，p和div都是在冒泡階段響應了事件，由於冒泡的特性，裹在裡層的p率先做出響應
如果把第三個參數都改為true
div.addEventListener('click', onClickFn, true);
p.addEventListener('click', onClickFn, true);
輸出如下
DIV 1 P 1
兩者都是在捕獲階段響應事件，所以div比p標簽先做出響應
IE事件模型
IE事件模型共有兩個過程:
- 事件處理階段：事件到達目標元素, 觸發目標元素的監聽函數。
- 事件冒泡階段：事件從目標元素冒泡到
document, 依次檢查經過的節點是否綁定了事件監聽函數，如果有則執行
事件綁定監聽函數的方式如下:
attachEvent(eventType, handler)
事件移除監聽函數的方式如下:
detachEvent(eventType, handler)
舉個例子：
var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
