JS基礎之事件概念篇

JS與HTML的交互是通過事件來實現的。通過偵聽器來預定事件，以便事件發生時執行相應的代碼。這些偵聽器用於爲事件處理程序屬性賦值處理函數、可以是addEventListener，也可以是attachEvent，後邊將詳細講述。

事件流

首先需要了解一下事件流，所謂事件流就是頁面接收事件的順序。DOM2規定了事件流有三個階段，捕獲階段、處於目標極端和事件冒泡階段。也就是說較爲不具體的節點先收到事件（例如document），一層一層往下傳播事件，直到到達目標元素。我們可以根據需要在捕獲階段攔截事件，但是一般情況下我們依舊在冒泡階段處理事件。需要注意的是IE的事件冒泡是說事件從目標元素開始一層一層網上傳播事件，直到遇到document。

事件處理程序

接收到了事件，我們要對它做出相應的處理，這就用到了事件處理程序，其實就是一個函數。
事件處理程序可以是直接以標籤onclick屬性值存在的一段代碼，我們稱之爲HTML事件處理程序，這種事件處理程序在執行的時候會擴大作用域，可以訪問document和自身的成員，如果目標元素是表單，還能訪問父元素form中的其他元素。其擴展作用域方法爲：

function(){
    with(document){
        with(this){
            //元素屬性
        }
    }
}

DOM先後提出了DOM0和DOM2級的事件處理程序，DOM0級是通過JavaScript指定事件處理程序的傳統方式，即給事件處理程序屬性賦值函數。DOM0級的事件處理程序被認爲是元素的方法，因而在元素的作用域中執行。

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

DOM2級的事件處理程序指定了兩個方法：addEventListener和removeEventListener，他們接收3個參數，分別是事件名、作爲事件處理程序的函數，一個布爾值，這個布爾值爲true時指定了在捕獲事件階段調用事件處理程序，一般情況下爲false，即在事件冒泡階段調用事件處理程序。
前邊說到了IE的事件流是事件冒泡，那麼第三個參數就不需要了，在IE事件處理程序中指定了類似的兩個方法：attachEvent和detachEvent。DOM2級事件和IE事件都可以爲目標元素添加多個事件處理程序，而DOM0級則只能指定一個事件處理程序。另外DOM2級事件和IE事件對事件的執行順序是不一樣的，DOM2是按照事件的添加順序來觸發處理程序，而IE則是先觸發後添加的事件偵聽器，即與DOM2相反。
另外值得提一下的是IE的attachEvent與DOM0、DOM2級方法的事件處理程序的作用域不一樣，前者會在全局作用域中執行，而後者在當前元素的作用域內執行。

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

因而在自己編寫跨瀏覽器的事件處理程序時要注意一下IE的作用域的問題，以及DOM0只能支持一個時間處理程序。