本文實例總結了JavaScript常見事件處理程序。分享給大家供大家參考，具體如下：
事件指的是使用者或者瀏覽器自身執行的某種動作（比如點擊事件）。響應這些事件的函數就叫做事件處理程序（或者叫事件監聽器）。事件處理程序的名字以“on”為前綴，比如 click 事件的事件處理程序就是 onclick。
1 HTML 事件處理程序
如果某個元素支持某個事件，那么它都有一個與相應的事件處理程序同名的 HTML 屬性，我們可以通過這個屬性來指定 JS：
<input type="button" value="點我" onclick="alert('點擊過咯')"/>因為這里的腳本是嵌入在 HTML 元素的屬性中，所以使用了單引號！
也可以調用在頁面的其他地方定義的腳本：
<input type="button" value="Click me" onclick="showMessage()"><script type="text/javascript"> function showMessage() { console.log("Hello World!"); }</script>事件處理程序的代碼在執行時，可以訪問到全局作用域中的任何代碼！
這樣指定的事件處理程序，會創建一個封裝著元素屬性值的函數，它有一個局部變量 event，就是事件對象：
<input type="button" value="點我" onclick="alert(event.type)"/>
通過 event 變量，可以直接訪問事件對象。在這個函數內部，this 值等于事件的目標元素：
<input type="button" value="點我" onclick="alert(this.value)"/>
可以通過這個動態創建的函數，來擴展它的作用域。在這個函數內部，可以訪問 document 以及該元素本身的成員，這個函數是像這樣使用 with 來擴展作用域的：
function(){ with(document){ with(this){ //元素屬性值 } }}所以，在事件處理程序中，要訪問自己的屬性就變得很容易啦 O(∩_∩)O~：
<!-- 輸出 “點我” --><input type="button" value="點我" onclick="alert(value)"/>
如果當前元素是一個表單輸入元素，則作用域中還會包含訪問表單元素（父元素）的入口，所以這個函數應該是這樣的：
function(){ with(document){ with(this.form){ with(this){ //元素屬性值 } } }}這樣事件處理程序就無需引用表單元素，就可以直接訪問到表單中的其他字段啦O(∩_∩)O~：
<form method="post"> <input type="text" name="username" value=""> <input type="button" value="Echo Usernmame" onclick="console.log(username.value);"></form>
在 HTML 中直接指定事件處理程序會有這些缺點：
<input type="button" value="點我" onclick="try{alert(value);} catch(ex){}"/>2 DOM0 級事件處理程序
它是通過將一個函數賦值給事件處理程序的屬性，來指定事件處理程序的。要使用這種方法，必須先取得一個要操作的對象的引用。
每個元素（包括 window 和 document） 都有自己的事件處理程序屬性，它們通常是小寫，比如 onclick。將屬性的值設置為函數，就指定了事件處理程序。
DOM0 級事件處理程序是元素的方法，它是在元素的作用域內運行的，因此程序中的 this 引用的是當前元素：
<button id="myBtn">點我</button><script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function () { console.log(this.id);//myBtn }</script>可以通過 this 訪問元素的任何屬性和方法。DOM0 級事件處理程序會在事件流的冒泡階段被處理。
也可以像這樣刪除這樣指定的事件處理程序：
btn.onclick = null; //刪除指定的事件處理程序
注意： 如果使用的是 HTML 指定的事件處理程序，那么 onclick 屬性的值就是一個包含著在同名 HTML 特性中指定的代碼函數。將相應的屬性設置為 null，也可以刪除以這種方式指定的事件處理程序。
3 DOM2 級事件處理程序
所有的 DOM 節點都包含這兩個方法。它們都接受 3 個參數：要處理的事件名、事件處理程序函數、布爾值。最后一個參數如果是 true，表示在捕獲階段調用事件處理程序；如果是 false，表示在冒泡階段調用事件處理程序。
DOM2 級事件處理程序可以很方便地添加多個事件處理程序：
var btn = document.getElementById("myBtn");btn.addEventListener("click", function () { console.log(this.id);}, false);btn.addEventListener("click", function () { console.log("Hello world!");}, false);這些事件處理程序會按照添加它們的順序依序觸發。
通過 addEventListener() 添加的事件處理程序只能使用 removeEventListener() 移除！移除時傳入的參數必須與添加時的參數相同。這也就意味著通過 addEventListener() 添加的匿名函數將無法被移除：
var handler = function () { console.log("Hi deniro");};btn.addEventListener("click", handler, false);btn.removeEventListener("click", handler, false);//移除成功大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容瀏覽器。所以如果不是特別需要，請不要在事件捕獲階段注冊事件處理程序。
注意： IE9、Firefox、Safari、Chrome 和 Opera 支持 DOM2 級事件處理程序。
4 IE 事件處理程序
IE 實現了與 DOM 類似的方法：attachEvent() 和 detachEvent()。它們接受兩個參數：事件處理程序名稱和事件處理程序函數。因為 IE8 及早期版本只支持事件冒泡，所以使用 attachEvent() 添加的事件處理程序會被添加到冒泡階段。
這樣為按鈕添加一個事件處理程序：
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () {}); IE 的 attachEvent() 與 DOM0 級方法的區別是事件處理程序的作用域不同。 DOM0 級方法中，事件處理程序會在其所屬元素的作用域內運行；而使用 attachEvent() ，事件處理程序會在全局作用域中運行，所以 this 等于 window：
var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function () { console.log("Clicked"); console.log(this === window);//true;this 為全局作用域});也可以為一個元素添加多個事件處理程序：
var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function () { console.log("Clicked"); console.log(this === window);//true;this 為全局作用域});//IE10 中多個事件是按照事件定義的順序執行btn.attachEvent("onclick", function () { console.log("Hello world!");});IE8 及之前的版本，是以添加它們的相反順序進行，IE9 修復了這個問題。
可以通過 detachEvent() 來移除添加的事件處理程序，但必須提供相同的參數。所以它也不能移除之前通過匿名函數添加的事件處理程序。只要能夠將對相同函數的引用作為參數，就可以移除添加的事件處理程序咯：
<button id="myBtn">點我</button><script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function () { console.log("Clicked"); } btn.attachEvent("onclick", handler); btn.detachEvent("onclick", handler);</script>注意： IE 和 Opera 支持 IE 事件處理程序。
5 跨瀏覽器的事件處理程序
只要恰當地運用能力檢測，就能寫出跨瀏覽器的事件處理程序。
var EventUtil = { /** * 添加事件 * @param element 要操作的元素 * @param type 事件名稱 * @param handler 事件處理函數 */ addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, /** * 移除事件 * @param element 要操作的元素 * @param type 事件名稱 * @param 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; } }}這樣使用：
<button id="myBtn">點我</button><script type="text/javascript" src="EventUtil.js"/><script type="text/javascript"> var btn = document.getElementById("myBtn"); var handler = function () { console.log("Clicked"); } EventUtil.addHandler(btn, "click", handler); EventUtil.removeHandler(btn, "click", handler);</script>還有一點，DOM0 級對每一個事件只支持一個事件處理程序，好在現在只支持 DOM0 級事件處理程序的瀏覽器幾乎已經沒有咯，所以不用擔心啦 O(∩_∩)O~
新聞熱點
疑難解答
