關於JavaScript與HTML的交互事件_基礎知識

JavaScript和HTML的互動是透過事件實現的。 JavaScript採用非同步事件驅動程式設計模型，當文件、瀏覽器、元素或與之相關物件發生特定事情時，瀏覽器會產生事件。如果JavaScript專注於特定類型事件，那麼它可以註冊當這類事件發生時要呼叫的句柄。

事件流

事件流描述的是從頁面中接收事件的順序，例如有兩個巢狀的div，點擊了內層的div，這時候是內層的div先出發click事件還是外層先觸發？目前主要有三種型號

IE的事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的元素

Netscape的事件擷取：較不具體的節點更早接收事件，而最具體的元素最後接收事件，和事件冒泡相反

DOM事件流：DOM2級事件規定事件流包括三個階段，事件捕獲階段，處於目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然後是實際目標接收事件，最後是冒泡句階段。

Opera、Firefox、Chrome、Safari都支援DOM事件流，IE不支援事件流，只支援事件冒泡

如有以下html，點選div區域

複製代碼 代碼如下:

   

   

   

        Click Here

事件處理程序（handler）

我們也稱之為事件偵聽器（listener），事件就是使用者或瀏覽器本身執行的某種動作。例如click、load、moseover等，都是事件類型（俗稱事件名稱），而回應某個事件的方法就叫做事件處理程序或事件監聽器或事件句柄，事件處理程序名字是：on 事件類型。

了解了這些，我們看看如何為元素添加事件處理程序

HTML事件處理程序元素支援的每個事件都可以使用對應事件處理程序同名的HTML屬性指定。這個屬性的值應該是可以執行的JavaScript程式碼，我們可以為一個button加入 click事件處理程序

複製程式碼

程式碼如下:

在HTML事件處理程序中可以包含要執行的具體動作，也可以調用在頁面其它地方定義的腳本,剛才的例子可以寫成這樣

複製程式碼

程式碼如下:



   

        function showMessage() {

在HTML中指定事件處理程序書寫很方便，但有兩個缺點。

首先，存在加載順序問題，如果事件處理程序在html代碼之後加載，用戶可能在事件處理程序還未加載完成時就點擊按鈕之類的觸發事件，存在時間差問題。

其次，這樣書寫html程式碼和JavaScript程式碼緊密耦合，維護不方便。

JavaScript指定事件處理程序透過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序屬性。每個元素都有自己的事件處理程序屬性，這些屬性名稱通常為小寫，如onclick等，將這些屬性的值設為一個方法，就可以指定事件處理程序，如下

複製程式碼

程式碼如下:

   

這樣處理，而事件處理程序被認為是元素的方法，事件處理程序在元素的作用域下運行，this就是當前元素，所以點選button結果是：btnClick
這樣還有一個好處，我們可以刪除事件處理程序，只要把元素的onclick屬性賦為null即可

DOM2事件處理程序DOM2級事件定義了兩個方法用於處理指定和刪除事件處理程序的操作：addEventListener和removeEventListener。所有的DOM節點都包含這兩個方法，而且它們都接受三個參數：事件類型、事件處理方法、一個布林值。最後布林參數如果是true表示在捕獲階段呼叫事件處理程序，如果是false，則是在事件冒泡階段處理。

剛才的例子我們可以這樣寫

複製程式碼 程式碼如下:

〈🎜>   


上面程式碼為button添加了click事件的處理程序，在冒泡事件的處理程序，在冒泡事件的處理程序，在冒泡事件觸發，與上一種方法觸發了click階段觸發，與上一種方法觸發一樣，這個程式也是在元素的作用域下運行，不過有一個好處，我們可以為click事件添加多個處理程序

複製程式碼 代碼如下:

〈🎜>   

我們介紹到，
使用attachEvent新增的事件處理程序可以透過detachEvent移除，條件也是相同的參數，匿名函數不能移除。

複製程式碼

程式碼如下: