JavaScript和HTML的互動是透過事件實現的。 JavaScript採用非同步事件驅動程式設計模型，當文件、瀏覽器、元素或與之相關物件發生特定事情時，瀏覽器會產生事件。如果JavaScript專注於特定類型事件，那麼它可以註冊當這類事件發生時要呼叫的句柄。
事件流
事件流描述的是從頁面中接收事件的順序，例如有兩個巢狀的div，點擊了內層的div，這時候是內層的div先出發click事件還是外層先觸發？目前主要有三種型號
IE的事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的元素
Netscape的事件擷取：較不具體的節點更早接收事件，而最具體的元素最後接收事件，和事件冒泡相反
DOM事件流：DOM2級事件規定事件流包括三個階段，事件捕獲階段，處於目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然後是實際目標接收事件，最後是冒泡句階段。
Opera、Firefox、Chrome、Safari都支援DOM事件流，IE不支援事件流，只支援事件冒泡
如有以下html，點選div區域
我們也稱之為事件偵聽器（listener），事件就是使用者或瀏覽器本身執行的某種動作。例如click、load、moseover等，都是事件類型（俗稱事件名稱），而回應某個事件的方法就叫做事件處理程序或事件監聽器或事件句柄，事件處理程序名字是：on 事件類型。
了解了這些，我們看看如何為元素添加事件處理程序
複製程式碼在HTML中指定事件處理程序書寫很方便，但有兩個缺點。
首先，存在加載順序問題，如果事件處理程序在html代碼之後加載，用戶可能在事件處理程序還未加載完成時就點擊按鈕之類的觸發事件，存在時間差問題。
其次，這樣書寫html程式碼和JavaScript程式碼緊密耦合，維護不方便。
JavaScript指定事件處理程序透過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序屬性。每個元素都有自己的事件處理程序屬性，這些屬性名稱通常為小寫，如onclick等，將這些屬性的值設為一個方法，就可以指定事件處理程序，如下
程式碼如下:
DOM2事件處理程序DOM2級事件定義了兩個方法用於處理指定和刪除事件處理程序的操作：addEventListener和removeEventListener。所有的DOM節點都包含這兩個方法，而且它們都接受三個參數：事件類型、事件處理方法、一個布林值。最後布林參數如果是true表示在捕獲階段呼叫事件處理程序，如果是false，則是在事件冒泡階段處理。
剛才的例子我們可以這樣寫
複製程式碼
