《javascript高級程序設計》之事件

1、事件處理程序

響應某個事件的函數叫作事件處理程序（或事件偵聽器），爲事件指定處理程序的方式有下面幾種。

一、html特性

<input type="button" value="click me" onclick="alert(event.type)"/>

這樣指定事件處理程序具備一些獨到之處。
(1)、首先會建立一個封裝着元素屬性值的函數。這個函數中又一個局部變量event，也就是事件對象。（這個函數，你是看不見的，是在系統執行的時候動態自動建立的。）
(2)、關於這個動態建立的函數，另外一個有意思的地方就是它擴展做用域的方式：

function(){
    with(document){
        with(this){
            ...//直接訪問元素的屬性值，好比name，value等
        }
    }
}

所以，事件處理程序要訪問本身的屬性就不須要this指明瞭，直接訪問就好。若是當前元素是一個表單元素，則做用域中還會包含表單元素（form），也就是說，你也能夠直接訪問form裏的其它元素屬性，好比username.value，username是另外一個表單元素的name值。
這樣指定事件處理程序缺點：(1)、存在一個時差問題，好比，事件處理程序裏調用了一個方法，但這個方法在這個元素渲染出來時尚未加載進來，那這個時候觸發事件就會出錯。
(2)、這樣擴展事件處理程序的做用域鏈在不一樣瀏覽器中會致使不一樣結果。
(3)、html和javascript的緊密耦合，若是要修改事件處理程序會很麻煩。

二、DOM 0 級事件處理程序

經過javascript得到要操做對象的引用，用js把一個函數賦值給一個事件處理程序屬性，好比onclick。

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

這樣指定的事件處理程序的this是指向元素自己的，所以能夠this訪問元素的任何屬性和方法。以這種方式添加的事件處理程序會在事件流的冒泡階段被捕獲。若是要刪除事件處理程序，只須要將這個屬性（onclick）的值設爲null。

三、DOM 2 級事件處理程序

「DOM2級事件」定義了兩個方法：addEventListener() ，removeEventListener() 。全部的DOM節點都包含這兩個方法。

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

第三個參數是一個布爾值，若是是true，表示在捕獲階段調用事件處理程序；false，是在冒泡階段。
這樣指定的事件處理程序也是在其依附的元素的做用域中運行。使用DOM2級方法添加事件處理程序的主要好處是能夠添加多個事件處理程序。

四、IE事件處理程序

IE實現了與DOM中相似的兩個方法：attachEvent()和detachEvent()。這兩個方法接收相同的兩個參數：事件處理程序名稱與事件處理程序函數。注意：事件處理名稱和addEventListener有區別，addEventListener是「 click 」，attachEvent是「 onclick 」。IE早期只支持事件冒泡，因此它的事件處理程序都被添加到冒泡階段。
IE的attachEvent與其它方法的主要區別是事件處理程序的做用域。其它方法的做用域都是其所屬元素；使用attachEvent的做用域是全局做用域，即：this等於window。
與DOM2級方法的區別是：事件處理程序不是以添加他們的順序執行，而是以相反的順序被觸發。DOM2級是以添加他們的順序執行的。

五、以上因此事件處理程序的總結

不管指定事件處理程序的方法是哪一種，瀏覽器都會將一個event對象傳入到事件處理程序中。

var btn=document.getElementById("myBtn");
btn.onclick=function(e){
    alert(e.type);      //"click"
}
btn.addEventListener("click", function(e){
    alert(e.type);
}, false);
<input type="button" value="click me" onclick="alert(event.type)"  />