JavaScript MVC 學習筆記（五）事件的基本操做

事件是 JavaScript 應用程序的核心，是全部內容的驅動。儘管後來W3C 對此作了標準化，但 IE 仍然堅持使用與 W3C 不兼容的事件模型，直到 IE9 才遵循標準。有不少諸如 jQuery 和 Prototye 的類庫很好地處理了兼容性問題，對外提供了統一的 API 來實現事件。

監聽事件

綁定事件監聽的函數是addEventListener()，有 3 個參數：type（好比click），listener（好比callback）及seCapture。使用前兩個參數能夠給一個 DOM 元素綁定一個函數，當特定的事件（好比點擊）被觸發時執行這個函數：

var button = document.getElementById("createButton");
button.addEventListener("click", function(){ /* ... */ }, false);

可使用removeEventListener() 來移除事件監聽，參數和傳入addEventListener() 的同樣。若是監聽的函數是匿名函數，沒有任何引用指向它，在不銷燬這個元素的前提下，這個監聽是沒法被移除的：

var div = document.getElementById("div");
var listener = function(event) { /* ... */ };
div.addEventListener("click", listener, false);
div.removeEventListener("click", listener, false);

帶入listener函數的第 1 個參數是event對象，經過event象能夠獲得事件的相關信息，好比時間戳、座標和事件宿主元素（target）。它一樣包含不少方法來中止事件冒泡和阻止事件的默認行爲。

不一樣的瀏覽器對事件類型的支持有些差別，但全部現代瀏覽器都支持這些事件：

• click
• dblclick
• mousemove
• mouseover
• mouseout
• focus
• blur
• change （表單輸入框特有）
• submit （表單特有）

事件順序

若是一個節點和它的一個父節點都綁定了相同事件類型的回調，當事件觸發時哪一個回調會先執行？

瀏覽器不一樣有不一樣的默認執行順序，分爲兩種：

• 事件捕捉（capturing），從頂層的父節點開始觸發事件，從外到內傳播。
• 事件冒泡（bubbling），從最內層的節點開始觸發事件，逐級冒泡直到頂層節點，從內向外傳播。

W3C將對這兩種事件模型的支持都加入標準規範之中。根據W3C型，事件首先被目標元素所捕捉，而後向上冒泡。

能夠自行選擇要註冊的事件處理程序的調用類型，捕捉或冒泡，經過給addEventListener()傳入第3個參數useCapture 來設置。若是addEventListener() 的最後一個參數是true，事件處理程序以捕捉模式觸發；若是是false，事件處理程序以冒泡模式觸發：

// 給最後一個參數傳入false，來設置事件冒泡
button.addEventListener("click", function(){ /* ... */ }, false);

大多數狀況下是使用冒泡模式，若是對此不太肯定，能夠給addEventListener()`的最後一個參數傳入false。

取消事件冒泡

當事件冒泡時，能夠經過stopPropagation()數來終止冒泡，這個函數是event對象中的方法。好比這段代碼，任何父節點的事件回調都不會觸發：

button.addEventListener("click", function(e){
    e.stopPropagation();
    /* ... */
}, false);

jQuery 還支持stopImmediatePropagation()函數，用來阻止後續全部的事件觸發——哪怕這些事件是註冊在同一個節點元素上的。

阻止瀏覽器的默認行爲

瀏覽器給事件賦予了默認行爲。好比，點擊一個連接時，瀏覽器的默認行爲是載入新頁面，當點擊一個複選框時，瀏覽器會將其選中（或取消選中）。在事件傳播階段（以後）會觸發這些默認行爲，在任何一個事件處理程序中均可以阻止默認行爲。能夠經過調用event對象的preventDefault()函數來阻止默認行爲，也能夠經過在回調中返回false來實現一樣的效果：

bform.addEventListener("submit", function(e){
    /* ... */
    return confirm("Are you super sure?");
}, false);

若是調用confirm()返回false（用戶點擊了對話框的取消按鈕），這個事件回調函數就返回false，這樣就會取消事件，阻止表單的提交。

（公開記錄學習JS MVC，不知道能堅持多久= =。以《基於MVC的JavaScript web富應用開發》爲主要學習資料。）