淺談JavaScript之Event
一 簡述JavaScript及其在瀏覽器中的地位
（一） 瀏覽器主要構成
雖然不同瀏覽器之間存在差異(如Google Chrome,Firefox,Safari和IE等)，但單從瀏覽器構成來說，大同小異，大致可歸結為如下幾類：
1.User Interface(使用者介面)：所謂使用者介面，就是通過瀏覽器渲染出來，讓使用者可見的介面，如位址列，書籤選單欄等；
2.Browser Engine(瀏覽器引擎)：主要操作呈現的引擎介面；
3.Rendering Engine(渲染引擎)：負責渲染響應請求內容，如負責解析HTML和CSS；
4.Networking(網路)：負責網路呼叫處理，如http請求；
5.JS Interpreter(JavaScript 直譯器)：負責解析和執行javascript程式碼；
6.UI Back(UI後端)：用於繪製組合框和視窗等基本組建；
7.Data Persistence(資料持久):通常用來持久化儲存少量資料，如cookie等；
（二）JavaScript在瀏覽器中的地位
如上圖，javascript處於瀏覽器中的核心位置，負責解釋和執行js指令碼，內置於瀏覽器中，通過瀏覽器提供的API來訪問。
（三）JavaScript構成
關於javascript的構成，大致可歸結為三個部分：ECMAScript，DOM和BOM。
1.ECMAScript是對js的約束和規範，如基本語法結構；
2.DOM就是文件物件模型，是互動的資源，如html文件；
3.BOM主要是對瀏覽器本身描述，如瀏覽器名稱，版本號等；
（四）JavaScript基本執行原理
這裡不深入談及javascript的深層次執行原理，只是大致描述一下，關於更深層次的，在後續文章推出，與大家分享。
JS的執行原理，用一句話來歸結之：單執行緒非同步。下圖很好地表述該過程。
所有的執行函式統一放在佇列中進行排隊。
二 事件流
所謂事件流，也可理解為事件的軌跡。一般地，將事件流分為三個階段：捕獲階段，目標階段和冒泡階段。
下圖為三個階段的大致流程圖。
（一）捕獲階段
捕獲階段處於事件流的第一階段，該階段的主要作用是捕獲擷取事件。在DOM中，該階段始於Document,結束於body(當然，在現在的很
多高版本瀏覽器中，該過程結束於目標元素，只不過不執行目標元素而已，這也體現了目標元素具有雙重範圍)。
（二）目標階段
目標階段處於事件流的第二階段，該階段的主要作用是執行繫結事件。一般地，該階段具有雙重範圍，即捕獲階段的結束，冒泡階段的開始；
（三）冒泡階段
冒泡階段處於事件流的第三階段，該階段的主要作用是將目標元素繫結事件執行的結果返回給瀏覽器，處理不同瀏覽器之間的差異，主要在該階段完成。
（四）三階段在Dom中的完整流程
三 事件處理程式
js事件處理程式按照種類來劃分，大致可分為五大類：HTML事件處理程式，DOM0級事件處理程式，DOM2級事件處理程式，IE事件處理程式和跨瀏覽器事件處理程式。
尤其是DOM0,DOM2和IE事件處理程式，利用它們之間的差異化有效地解決瀏覽器差異問題，從而實現跨瀏覽器的相容性問題。
（一）html事件處理程式
所謂html事件處理程式，就是在dom結構中巢狀js程式碼。在html中，元素支援的所有事件，都可以使用與相應事件處理程式同名的html特性來指定，這個特性的值應該是能執行的js程式碼。
如點選事件。
<body>
<!--html事件處理程式-->
<input type="button" value="請點選" onclick="alert('測試html事件處理程式！！')"/>
</body>
當然，一般不採用如上方法，常規的做法是，將js程式碼定義在目標元素外部。因此，與如上相同功能的定義為：
目標元素
<body>
<!--html事件處理程式-->
<input type="button" value="請點選" onclick="HtmlEventHandlerProc()"/>
</body>
外部js
<script>
function HtmlEventHandlerProc() {
alert('測試html事件處理程式！！');
}
</script>
Tip:
1.事件處理程式中的程式碼，能夠訪問全域性作用域中的任何變數；
2.每個function()存在一個區域性變數，即事件物件event，通過event變數，可以直接訪問事件物件。
<body> <input type="button" value="請點選" onclick="alert(event.type)"/> </body>
執行結果
3.在函式內部，this值等於事件的目標元素。
<body>
<input type="button" value="請點選" onclick="alert(this.value)"/>
</body>
執行結果
this具有擴充套件作用域的功能，其功能相當於
function myfunction() {
with (document) {
with (this) {
//add your logic
}
}
}
如果當前元素是一個表單元素，則作用域還會包含訪問表單元素（父元素）的入口。
function myfunction() {
with (document) {
with (this.form) {
with (this) {
//add your logic
}
}
}
}
這樣做，有什麼本質意義呢？當然是想讓事件處理程式更快捷訪問表單其他欄位(無需引用表單元素就能訪問)
<form>
<input type="text" name="userName" value="Alan_beijing" />
<input type="button" value="測試表單元素" onclick="alert(userName.value)" />
</form>
執行結果
4.html事件處理程式存在哪些缺點？
缺點一：時差問題
缺點二：擴充套件的作用域鏈在不同瀏覽器中會導致不同結果
缺點三：html程式碼與js程式碼高度耦合
（二）DOM0級事件處理程式
DOM0級事件很好地解決了html和js程式碼強耦合的問題。
1.為元素繫結事件
var btn = document.getElementById('myBtn');
btn.onclick = function () {
alert('Clicked');
}
2.為元素解除事件
btn.onclick = null;
（三）DOM2級事件處理程式
DOM2級事件定義了兩個方法來為目標元素繫結事件處理程式(addEventListener())和解除事件處理程式(removeEventListener())，所有節點中都包含這兩個方法，並且他們都接收三個引數：
要處理的事件名，事件處理程式和一個布林值(true表示是在捕獲階段進行，false表示在冒泡階段進行)
1.為事件新增click事件處理程式（冒泡階段進行）
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
執行結果：
2.新增多個事件處理程式
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function myfunction() {
alert("新增的第二個事件處理程式");
}, false);
執行結果：
3 移除事件處理程式
通過addEventListener()新增的事件處理陳旭只能使用removeEventListener()來移除，移除時，傳入的引數與新增的程式時使用的引數相同
（這意味著匿名函式不能通過removeEventListener()來刪除）
匿名函式不能刪除
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
//不能刪除，因為是匿名函式
btn.removeEventListener("click", function () {
alert(this.id);
}, false);
非匿名函式能刪除
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
//刪除事件處理程式
btn.removeEventListener("click", handler, false);
（四）IE事件處理程式
IE提供了兩個方法來繫結和解除安裝事件處理程式，attachEvent()和detachEvent()，這兩個方法均接收兩個引數，即事件處理程式名稱和事件處理程
序函式，並且在冒泡階段新增（IE8及更早版本只支援冒泡）
1.為目標按鈕新增繫結事件
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
alert("IE事件處理程式！！");
});
2.為目標按鈕新增繫結事件
多個執行繫結事件的結果是倒過來的。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
alert("IE事件處理程式1！！");
});
btn.attachEvent("onclick", function () {
alert("IE事件處理程式2！！");
});
3.為目標元素移除事件處理程式
注意：匿名事件處理程式是不能夠移除的
var btn = document.getElementById("myBtn");
var handler = function () {
alert("IE事件處理程式");
};
//繫結事件
btn.attach("onclick", handler);
//移除事件
btn.detachEvent("onclick", handler);
（五）跨瀏覽器事件處理程式
在跨瀏覽器中，無非就是三種選擇：DOM0級選擇(不常用，基本被廢棄)，DOM2級選擇和IE選擇(不常用，IE8及以下版本)。
//定義EventUtil
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
//呼叫
var btn = document.getElementById("myBtn");
var handler = function () {
alert("事件處理程式跨瀏覽器！！");
};
//繫結事件處理程式
EventUtil.addHandler(btn, "click", handler);
//移除事件處理程式
EventUtil.removeHandler(btn, "click", handler);
四 事件型別
內容相對比較簡單，這裡就暫且列舉主要內容，若有需要，會在下篇文章論述。
五 事件物件及其事件委託
介於文章篇幅有限，暫且列舉主要內容，程式碼部分將在下篇文章論述。
六 版權區
- 感謝您的閱讀，若有不足之處，歡迎指教，共同學習、共同進步。
- 博主網址：http://www.cnblogs.com/wangjiming/。
- 極少部分文章利用讀書、參考、引用、抄襲、複製和貼上等多種方式整合而成的，大部分為原創。
- 如您喜歡，麻煩推薦一下；如您有新想法，歡迎提出，郵箱：[email protected]。
- 可以轉載該部落格，但必須著名部落格來源。