## 10.2 事件處理程序 響應某個事件的函數就叫做**事件處理程序（或事件偵聽器）**。 ### 10.2.1 HTML事件處理程序 某個元素支持的每種事件，都可以使用一個與相應事件處理程序同名 HTML特性來指定。 在HTML中定義的事件處理程序可以包含要執行的具體動作，也可以調用在頁面其他地方定義的腳本。 特點： * 創建一個封裝著元素屬性值的函數。這個函數中有一個局部變量event，即事件對象。通過event變量，可以直接訪問事件對象。在函數內部，this值等于時間的目標元素。 * 擴展作用域的方式：在函數內部，可以像訪問局部變量一樣訪問document及該元素本身的成員。 缺點： * 存在一個時差問題。因為用戶可能會在HTML元素一出現在頁面上就觸發相應的事件，但當時的事件處理程序有可能尚不具備執行條件。 * 擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同結果。 * HTML與JavaScript代碼緊密耦合。 ### 10.2.2 DOM0級事件處理程序 通過JavaScript指定事件處理程序的傳統方式，將一個函數賦值給一個事件處理程序屬性。 每個元素（包括window和document）都有自己的事件處理程序。 刪除可設置，如`btn.onclick = null；` ### 10.2.3 DOM2級事件處理程序 “DOM2級事件”定義了兩個方法，用于處理指定和刪除時間處理程序的操作：`addEventListener()和removeEventListener()`。所有節點中都包含這兩個方法，并且接受3個參數：要處理的事件名（前頭無on）、作為事件處理程序的函數和一個布爾值（true表示在捕獲階段調用時間處理程序，false表示在冒泡階段調用。） ~~~ var btn = document.getElementById("mybtn"); btn.addEventListener("click",function(){ alert(this.id); },false); //多數為false，最大限度兼容各種瀏覽器。 ~~~ 通過addEventListener()添加的事件處理程序**只能**使用removeEventListener()來移除；移除時傳入的參數與添加處理程序時使用的參數相同，意味著**添加的匿名函數將無法移除，建議傳入函數名。** ### 10.2.4 IE事件處理程序 IE實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。兩個方法接受相同的兩個參數：事件處理程序名稱（前綴on）與事件處理程序函數。 添加多個事件出程序時，按添加的相反順序被處罰。 添加的匿名函數也將不能被移除。 ### 10.2.5 跨瀏覽器的事件處理程序 ~~~ var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler，false); } else if (element.attachEvent) { element.attachEvent('on' + type, handler); } else if (element != window) { element['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 if (element != window) { element['on' + type] = null; } } }; var btn = document.getElementById("mybtn"); var handler = function(){ alert("Clicked"); }; EventUtil.addHandler(btn,"click",handler); EventUtil.removeHandler(btn,"click",handler); ~~~