js的事件處理

事件處理 客戶端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); };
}

設置HTML標籤屬性爲事件處理程序

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

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

addEventListener()

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

<script>
  		var b = document.getElementById("my button");
  		b.onclick = () => { alert("Thanks for clicking me!"); };
  		b.addEventListener("click", () => { alert("Thanks again!"); }, false);	// 最後一個參數爲是否進行冒泡
  	</script>

上方會彈出兩個對話框，一個觸發了onclick事件，一個觸發了addEventListener註冊的click事件。 註冊的click處理的函數，將會按照註冊的順序依次不斷的調用。(能夠註冊多個處理程序)。

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

移出在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將這兩種給統一了，規定任何事件首先向下傳播直到遇到目標元素，若是沒有遇到冒泡元素，將會不斷的向上冒泡進行返回。的