件處理

客戶端js程序采用異步事件驅動編程模型。在這種情況下當文檔，瀏覽器，元素發生一些事情的時候，會產生事件。

舉例 當瀏覽器加載完文檔以后會觸發一個事件。該事件會有一個函數進行處理，即回調函數

這種只不單單用于web界面，所有使用圖形界面的應用程序都采用了這種方式。

事件類型

事件分類

依賴于設備的輸入事件

有些事件和特定輸入設備直接相關。比如鼠標和鍵盤。

touchmove 當觸點在觸控平面上時發生該事件

獨立于設備的輸入事件

click事件表示激活了鏈接的事件。通過鼠標，按鈕或者移動設備上的觸摸觸發該事件

用戶界面事件

通常用于HTML表單元素，包括文本輸入域獲取鍵盤焦點的focus事件，提交按鈕將會觸發submit事件

狀態變化事件

不是由用戶活動由網絡或者瀏覽器活動觸發，表示某種生命周期或相關狀態的變化。

online 返回瀏覽器的聯網狀態

特定的api事件

一些web api會有自己的事件類型

拖放的api dragstart 當用戶拖動一個元素，或者選擇一個文本的時候觸發該事件

計時器和錯誤處理程序

計時器在指定的時間后觸發該事件，錯誤處理程序，try catch 對應于一個響應，會有異步進行拋出

傳統事件類型

表單事件

當提交表單和重置表單時會觸發submit和reset事件，當用戶和類按鈕（包括單選和復選）交互的時，將會發生click事件，當用戶輸入文字，選擇選項或選擇復選框改變相應的表單元素的狀態時，將會觸發change事件，通過鍵盤改變焦點的表單元素在得到和失去焦點時將會觸發focus和blur事件。

通過事件處理程序能取消submit和reset事件的默認操作。某些click事件也是如此，focus和clur事件不會冒泡，但其他所有表單事件都可以。

無論用戶何時輸入文字，都會觸發input事件。

window事件

window事件是指事件的發生與瀏覽器窗口本身而非窗口中顯示的任何特定文檔內容相關。

load事件

load事件與文檔和其所有外部資源（圖片）完全加載并顯示給用戶時將會觸發。

unload事件

unload事件，當用戶離開當前文檔轉向其他文檔時將會觸發。

unload事件處理程序可以用于保存用戶的狀態，但其不能取消用戶轉向其他地方。

beforeunload事件

此事件將會詢問用戶是否確定離開當前頁面。如果beforeunload的回調函數返回一個字符串，那么在新頁面加載之前，字符串將會出現在展示給用戶確認的對話框上，這樣用戶將會有機會取消跳轉停留在當前頁上

注意；該事件僅僅是在當前頁面的跳轉更改等，轉換標簽不會觸發該事件

onerror屬性

此為一個window對象的屬性。在js出錯的時候將會觸發其

其他

像img元素這樣的替換元素也能為其注冊load和error事件處理程序。當外部資源完全加載或發生阻塞加載錯誤時將會觸發該事件。某些瀏覽器也支持about事件，當圖強因為用戶停止加載進程而導致失敗的時候也會觸發該事件。

focus和blur事件也為window事件，當瀏覽器窗口從操作系統中得到或失去鍵盤焦點的時候將會觸發該事件

當用戶調整瀏覽器窗口大小或滾動其會觸發resize和scroll事件，scroll事件也能在任何可以滾動的文檔元素上觸發，例如css的的overflow屬性也能觸發。

鼠標事件

當用戶在文檔上移動和單擊鼠標時都會產生鼠標事件。這些事件在鼠標指針所對應的最深嵌套元素上觸發。但其會冒泡直到文檔的最頂層。

clientX和clientY屬性指定了鼠標在窗口坐標中的位置。button和which屬性指定了按下的鼠標鍵是哪個。

當鼠標輔助鍵按下的時候，對應的屬性為altkey和ctrlkey和metakey和shiftkey會設置為true，對于click事件，detail屬性指定了其是單擊，雙擊，還是三擊。

每當用戶移動和拖動鼠標時，會觸發mousemove事件，當用戶按下或釋放鼠標按鍵的時候觸發mousedown和mouseup事件。

在mousedown和mouseup事件隊列之后，瀏覽器也會觸發click事件，如果用戶在很短的時間內單擊兩次鼠標，則第二個事件為dblclic事件，當單擊鼠標右鍵時，瀏覽器會顯示上下文菜單，在顯示菜單之前，也會觸發contextmenu事件，如果取消這個事件將會阻止菜單的顯示，該事件為獲得鼠標右擊通知的最簡單方法。

當用戶移動鼠標指針從而使它懸停到新元素上時，瀏覽器就會在該元素上觸發mouseover事件，當鼠標移動指針從而使它不在懸停在某個元素上時，瀏覽器會觸發mouseout事件，（該事件有relatedTarget屬性指明這個過程涉及的其他元素）

當用戶滾動鼠標的時候，瀏覽器觸發mousewheel事件，傳遞事件對象屬性指定輪子轉動的大小和方向。

鍵盤事件

當鍵盤聚焦到web瀏覽器時，用戶每次按下或釋放鍵盤上的按鍵時都會產生事件，鍵盤快捷鍵葉同樣能被瀏覽器和操作系統吃掉，此時對js事件處理程序不可見，無論任何文檔元素獲取鍵盤焦點都會觸發鍵盤事件，并會冒泡到window對象，

觸摸屏和移動設備事件

用戶旋轉設備的時會產生orientationchange事件，有一個縮放和旋轉手勢，當手勢開始時將會生成getsturestart事件，手勢結束時將會生成gestureend事件。在這兩個事件之間是跟蹤手勢過程的gesturechange事件隊列，將事件傳遞的事件對象屬性為scale和rotation

握緊手勢的scale值小于1.0

撐開手勢的scale的值大于1.0

rotation為事件開始時手指旋轉的角度。以度為單位正值表示順時針方向旋轉

當手指觸摸屏幕的時候將會觸發touchstart事件，當手指移動時會觸發touchmove事件，當手指離開屏幕時會觸發touchend事件，觸摸事件傳遞的事件對象有一個changedTouches屬性，該屬性為一個類數組對象，其每個元素都描述觸摸的位置。

當設備允許用戶從豎屏旋轉到橫屏模式時會在window對象上觸發orientationchanged事件。該對象的orientation屬性能給出當前方位，其值為0， 90， 180， 或 -90

注冊事件處理程序

1. 給事件目標對象或文檔元素設置屬性
2. 將事件處理程序傳遞給對象或文檔元素的一個方法

設置js對象屬性為事件處理程序

事件處理程序屬性的名字由on后面跟著事件名組成。onclick，onchange，onload，onmouseover

onload 當對象的資源被加載的時候，該對象的onload事件將會被觸發，然后將表單的提交的onsubmit事件和一個處理函數進行綁定

onsubmit 在表單提交的時候，將會觸發該事件

下方栗子演示一個提交的時候表單驗證的過程

其中validate函數為一個自定義的表單驗證函數，其函數的參數this指向elt

window.onload=()=> {

// 查找一個<form>元素

var elt=document.getElementById("shipping_address");

// 注冊事件處理程序函數

// 在表單提交之前調用該函數

elt.onsubmit=()=> { return validate(this); };

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

設置HTML標簽屬性為事件處理程序

<button onclick="alert('Thank you');">點擊這里</button>

• 1

點擊按鈕會彈出一個對話框

addEventListener()

為事件綁定一個處理的函數

<script>

var b=document.getElementById("my button");

b.onclick=()=> { alert("Thanks for clicking me!"); };

b.addEventListener("click", ()=> { alert("Thanks again!"); }, false); // 最后一個參數為是否進行冒泡

</script>

• 1
• 2
• 3
• 4
• 5

上方會彈出兩個對話框，一個觸發了onclick事件，一個觸發了addEventListener注冊的click事件。

注冊的click處理的函數，將會按照注冊的順序依次不斷的調用。(可以注冊多個處理程序)。

document.removeEventListener("mousemove", handleMouseMove, true);

• 1

移出在mousemove上注冊的事件，處理函數為handLenMouseMove，在事件上直接注冊，沒有冒泡的過程。

事件處理程序的調用

事件處理程序運行的環境

this關鍵字指的是事件的目標。

事件處理程序的作用域

這是個坑的集散地，表單上有一個HTML事件處理程序想要引用window的location對象，必須使用window.location，不能使用location，因為該location為表單作用域鏈上的location

事件處理程序的返回值

如果返回false則告訴瀏覽器不要執行這個事件的默認操作。

調用順序

通過設置對象屬性，HTML屬性注冊的處理程序一直優先調用

使用addEventList注冊的處理程序，按照DOM的順序進行調用

使用attachEvent()注冊的事件按照隨機的順序調用

事件傳播

當事件目標為window對象或其他一些單獨對象，瀏覽器會簡單的調用對象上的處理程序響應事件。

調用目標元素上注冊的事件處理函數

在調用目標元素上注冊的事件處理函數的時候，該事件會冒泡到DOM樹的樹跟，調用目標的父元素的事件處理程序，即可以在共同的祖先元素上注冊一個處理程序來處理所有的事件

例如：在form元素上注冊change事件處理程序取代在表單的每個元素上注冊change事件處理程序。

原因：冒泡

注意：load事件，（load當資源加載完成以后，將會觸發load事件，不單單指整個文檔）其會在Document對象上停止冒泡不會傳播到window對象，只有整個文檔都加載完成的時候將會觸發window對象的load事件

捕獲

事件的第一階段 捕獲 發生在目標處理程序調用程序之前 addEventener()把一個布爾值作為其第三個參數，如果為true那么事件處理程序被注冊為捕獲事件處理程序，會在事件傳播的第一個階段調用。事件傳播的捕獲階段像是反向的冒泡，,將會最先調用window對象的捕獲處理程序，然后將會調用document對象的捕獲處理程序，接著是body對象的捕獲處理程序，逐漸按照DOM樹往下，直到調用事件目標的父元素的捕獲事件捕獲。

事件取消

通過調用事件對象的preventDefault()方法取消事件的默認操作。

文檔加載事件

web應用需要web瀏覽器通知它們文檔加載完畢和為操作準備就緒的時間。

當文檔準備就緒的時候調用函數

事件冒泡和傳播

事件冒泡屬于微軟的，向上

事件傳播屬于網景瀏覽器（懷舊，一個時代，可惜已經不存在了），正好相反。

后來w3c將這兩種給統一了，規定任何事件首先向下傳播直到遇到目標元素，如果沒有遇到冒泡元素，將會不斷的向上冒泡進行返回。