事件處理程序

• 事件就是用戶或瀏覽器自身執(zhí)行的某種動作，而響應(yīng)某個事件的函數(shù)就叫做事件處理程序。

1、HTML 事件處理程序

• 某個元素支持的每種事件，都可以使用一個與相應(yīng)事件處理程序同名的HTML 特性來指定。

<script type="text/javascript">
    function showMessage(){
        alert("Hello world!");
    }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
<!-- 輸出 "click" -->
<input type="button" value="Click Me" onclick="alert(event.type)">
<!-- 輸出 "Click Me" -->
<input type="button" value="Click Me" onclick="alert(this.value)">

• 通過HTML 指定事件處理程序的最后一個缺點是HTML 與JavaScript 代碼緊密耦合。

2、DOM0 級事件處理程序

• 通過JavaScript 指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個事件處理程序?qū)傩浴?/li>
• 每個元素（包括window和document）都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert("Clicked");
};

• 使用DOM0 級方法指定的事件處理程序被認(rèn)為是元素的方法，程序中的this引用當(dāng)前元素。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert(this.id); //"myBtn"
};

• 刪除通過DOM0級方法指定的事件處理程序，可以將事件處理程序?qū)傩缘闹翟O(shè)置為null

btn.onclick = null; //刪除事件處理程序

3、DOM2 級事件處理程序

• “DOM2級事件”定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener() 和 removeEventListener()。
• 所有DOM節(jié)點中都包含這兩個方法，并且它們都接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);

• 使用DOM2 級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
btn.addEventListener("click", function(){
    alert("Hello world!");
}, false);
//這兩個事件處理程序會按照添加它們的順序觸發(fā)

• 通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除；
• 移除時傳入的參數(shù)與添加處理程序時使用的參數(shù)相同。這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    alert(this.id);
}, false);
//這里省略了其他代碼
btn.removeEventListener("click", function(){ //沒有用！
    alert(this.id);
}, false);

• 雖然調(diào)用remove-EventListener()時看似使用了相同的參數(shù)，但實際上，第二個參數(shù)與傳入addEventListener()中的那一個是完全不同的函數(shù)。

var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
};
btn.addEventListener("click", handler, false);
//這里省略了其他代碼
btn.removeEventListener("click", handler, false); //有效！

• 大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。
• IE9、Firefox、Safari、Chrome 和Opera 支持DOM2 級事件處理程序。

4、IE事件處理程序

• IE 實現(xiàn)了與DOM 中類似的兩個方法：attachEvent()和detachEvent()。
• 這兩個方法接受相同的兩個參數(shù)：事件處理程序名稱與事件處理程序函數(shù)。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert("Clicked");
});

• 在IE 中使用attachEvent()與使用DOM0 級方法的主要區(qū)別在于事件處理程序的作用域。
• 在使用DOM0 級方法的情況下，事件處理程序會在其所屬元素的作用域內(nèi)運(yùn)行。
• 在使用attachEvent()方法的情況下，事件處理程序會在全局作用域中運(yùn)行，因此this 等于window。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert(this === window); //true
});

• 與addEventListener()類似，attachEvent()方法也可以用來為一個元素添加多個事件處理程序。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert("Clicked");
});
btn.attachEvent("onclick", function(){
    alert("Hello world!");
});
//這兩個事件處理程序以相反的順序被觸發(fā)

• 使用attachEvent()添加的事件可以通過detachEvent()來移除，條件是必須提供相同的參數(shù)。只要能夠?qū)ο嗤瘮?shù)的引用傳給detachEvent()，就可以移除相應(yīng)的事件處理程序。

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
btn.attachEvent("onclick", handler);
//這里省略了其他代碼
btn.detachEvent("onclick", handler);

• 支持IE 事件處理程序的瀏覽器有IE 和Opera。

5、跨瀏覽器的事件處理程序

• 要保證處理事件的代碼能在大多數(shù)瀏覽器下一致地運(yùn)行，只需關(guān)注冒泡階段。
• 第一個要創(chuàng)建的方法是addHandler()，它的職責(zé)是視情況分別使用DOM0 級方法、DOM2 級方法或IE 方法來添加事件。
• addHandler()方法接受3 個參數(shù)：要操作的元素、事件名稱和事件處理程序函數(shù)。
• 與addHandler()對應(yīng)的方法是removeHandler()，它也接受相同的參數(shù)。這個方法的職責(zé)是移除之前添加的事件處理程序——無論該事件處理程序是采取什么方式添加到元素中的，如果其他方法無效，默認(rèn)采用DOM0 級方法。

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 {
            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 {
            element["on" + type] = null;
        }
    }
};

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//這里省略了其他代碼
EventUtil.removeHandler(btn, "click", handler);

好好學(xué)習(xí)