DOM中的事件型別及HTML5中的事件型別
DOM中事件型別有：
UI（使用者介面）事件，使用者與頁面上元素互動時觸發 ；
焦點事件：當元素獲得或失去焦點時觸發；
滑鼠事件：當用戶通過滑鼠在頁面上執行操作時觸發；
滾輪事件：當使用滑鼠滾輪（或類似裝置）時觸發；
文字事件：當在文件中輸入文字時觸發；
鍵盤事件：當用戶通過鍵盤在頁面上執行操作時觸發；
合成事件：當為IME（輸入法編輯器）輸入字元時觸發；
變動事件：當底層DOM結構發生變化時觸發；
一.UI事件
load:當前頁面完全載入在window上面觸發，當所有框架都載入完畢時在框架集上面觸發，當影象載入完畢時在<img>元素上觸發，或者當嵌入的內容載入完畢時在<object>元素上面觸發。
unload：當頁面完全解除安裝後再window上面觸發，當所有框架都解除安裝後再框架集上觸發，或者當嵌入的內容解除安裝完畢後在<object>元素上觸發
abort:在使用者停止下載過程時，如果嵌入的內容沒有載入完，則在<object>元素上面觸發
error：當發生javascript錯誤時在window上面觸發，當無法載入影象時在<img>元素上面觸發，當無法載入嵌入內容時在<object>元素上面觸發，或者當有一個火多個框架無法載入時在框架集上面觸發。
select：當用戶選擇文字框中的一個或多個字元時觸發。
resize：當視窗或框架的大小變化時在window或框架上面觸發
scroll：當用戶滾動帶滾動條的元素中的內容時，在該元素上面觸發。<body>元素中包含所載入頁面的滾動條。
二.焦點事件
blur :在元素失去焦點時觸發。這個事件不會冒泡；所有瀏覽器都支援它
focus ：在元素獲得焦點時觸發，這個事件不會冒泡；所有瀏覽器都支援它。
focusin:在元素獲得焦點時觸發。這個事件與HTML事件focus等價。但它冒泡。支援這個事件的瀏覽器有IE5.5+、safari5.1+、Opera11.5+和Chrome
focusin:在元素失去焦點時觸發。這個事件是HTML事件blur的通用版本。支援這個事件的瀏覽器有IE5.5+、safari5.1+、Opera11.5+和Chrome
三.滑鼠和滾輪事件
click:使用者單擊主滑鼠按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發。
dblclick：在使用者雙擊主滑鼠按鈕時觸發
mousedown：在使用者按下了任意滑鼠按鈕時觸發，不能通過鍵盤觸發這個事件
mouseenter:在滑鼠游標從元素外部首次移動到元素範圍內是觸發。這個事件不冒泡，而且在游標移動到後代元素上不會觸發。它從DOM3開始才納入規範.IE Firefox9+ Opera支援這個事件。
mouseleave:在位於元素上方的滑鼠游標移動到元素範圍之外時觸發這個事件不冒泡，而且在游標移動到後代元素上不會觸發。它從DOM3開始才納入規範.IE Firefox9+ Opera支援這個事件。
mousemove：當滑鼠指標在元素內部移動時重複的觸發，不能通過鍵盤觸發這個事件
mouseout：在滑鼠指標位於一個元素上方，然後使用者將其移入另一個元素時觸發。
mouseover：在滑鼠位於一個元素外部，然後使用者將其首次移入另一個元素邊界內觸發。不能通過鍵盤觸發這個事件
mouseup：在使用者釋放滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件
註釋：只有在同一個元素上相繼觸發mousedown和mouseup事件才會觸發click事件；如果mousedown和mouseup中的一個被取消就不會觸發click事件。click事件觸發的順序如：mousedown mouseover click ；dblclick事件觸發的順序如：mousedown mouseover click mousedown mouseover click dblclick
1.客戶區座標 clientX 與clientY 2.頁面座標位置 pageX 和pageY 而在IE8及更早版本需要用到document.body（混雜模式）或document.documentElement（標準模式）中的scrollLeft 和scrollTop屬性 3.螢幕座標位置 使用screenX和screenY屬性來確定相對於螢幕的座標資訊。
4.修改鍵 DOM規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey、metaKey 如果相應的鍵被按下了，則值時true否則為false。當某個滑鼠事件發生時，通過檢測這幾個屬性就可以確定使用者是否同時按下了其中的鍵
5.相關元素：DOM通過event物件的relatedTarget屬性提供了相關元素的資訊。這個屬性只對於mouseover和mouseout事件才包含值；對於其他事件這個屬性的值是null IE8及之前版本不支援relatedTarget，它提供了兩個屬性來完成類似功能。在mouseover事件觸發時，IE的formElement儲存了相關元素；在mouseout事件觸發時，IE的toElement屬性中儲存著相關元素
6.滑鼠按鈕：只有在主滑鼠被單擊時才會觸發click事件，因此檢測按鈕資訊並不是必要的。但對於mousedown和mouseup事件來說，則在其event事件存在一個button屬性表示按下和釋放按鈕；DOM中的button屬性可能有3個值：0表示主滑鼠按鈕 ；1表示中間的滑鼠按鈕，2表示次滑鼠按鈕。由於IE8之前也提供的相同的button屬性 但分的更細有8個值，由於3個值的更實用。所以相容程式碼如下：
//滑鼠左鍵右鍵和滾輪的相容
getButton : function(event){
if (document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else {
//以下是IE中的相容方法，IE的更不實用
switch (event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
7.更多的事件資訊 ”DOM2級事件“ 規範event物件中還提供了detail屬性，用於給有關事件提供更多資訊。對於滑鼠事件來說，detail中包含了一個數值，表示在給定位置上發生了多少次單擊。
8.滑鼠滾輪事件：mousewheel事件 非常流行而且所有瀏覽器都支援它。所以HTML5也加入了該事件
//相容獲取滑鼠滾輪資訊（這段相容程式碼存在問題）
getWheelDelta: function(event){
//為了相容opera早期的版本
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ?
-event.wheelDelta : event.wheelDelta);
} else {
//之所以乘40是火狐返回的是3與-3
return -event.detail * 40;
}
}上面程式碼存在問題IE中無法識別client.engine.opera。所以只能在火狐中實現。但如果將判斷opera早期版本的去掉應該是可以的。
9觸控裝置IOS和Android裝置的實現非常特別，因為這些裝置沒有滑鼠。注意幾點如下：
1.不支援dbclick事件。雙擊瀏覽器視窗會放大畫面。而且沒有辦法改變該行為。
2.輕擊可單擊元素會觸發mousemove事件。如果此操作會導致內容變化，將不再有其他事件發生；如果螢幕沒有因此變化，那麼會依次產生mousedown、mouseup、和click事件。輕擊不可單擊的元素不會觸發任何事件。可單擊的元素是指那些單擊可產生預設操作的元素，或者那些已經被指定了onclick事件處理程式的元素
3.mousemove事件也會觸發mouseover和mouseout事件。
4.兩個手指放在螢幕上且頁面隨手指移動而滾動時會觸發mousewheel 和scroll事件
四。鍵盤與文字事件有三個鍵盤事件：keydown當用戶按下鍵盤上的任意鍵時觸發 keypress當用戶按下鍵盤上的字元鍵時觸發 keyup當用戶釋放鍵盤上的鍵時觸發。 還有一個文字事件textInput 這個事件是對keypress事件的補充，用意是在將文字顯示給使用者之前更容易攔截文字，在文字插入文字框之前會觸發textInput事件
在使用者按下一個鍵盤上的字元鍵是，首先會觸發事件的順序是：keydown keypress keyup 如果使用者按下一個字元鍵不放就會重複觸發keydown和keypress事件， 直到使用者鬆開該鍵為止。如果使用者按下的是一個非字元鍵，那麼觸發事件的順序是：keydown keyup 如果按住這個非字元鍵不放，那就會一直重複觸發keydown事件，直到使用者鬆開這個鍵時，才會觸發keyup。鍵盤事件和滑鼠事件一樣，都支援相同的修改鍵，鍵盤事件的事件物件中也有shiftKey ctrlKey altKey 和metaKey屬性。
DOM3級事件中鍵盤事件不再包含charCode事件，二是包含兩個新屬性：key和char 其中key 在按下的是字元和非字元顯示的結果都是一樣的，而char只有在按下的時候是字元才會顯示，按下非字元則值為null。 還添加了一個屬性名為location表示按下了什麼位置的鍵。 （由於存在跨瀏覽器問題（IE9支援Key屬性，但不支援char屬性，safari5和chrome支援名為keyIdentifier的屬性），因此不推薦使用）
DOM3級事件引入了一個新事件 textInput 它與keypress的差別 一是隻有可編輯區域才能觸發textInput事件 區別之二是textInput事件只會在使用者按下能夠輸入實際字元的鍵時才會被觸發。而keypress事件則在按下那些能夠影響文字顯示的鍵時也會觸發。支援textInput屬性的瀏覽器有IE9+、safari和chrome
HTML5中的事件型別
- onabort：當發生中止事件時執行指令碼
- onblur：當失去焦點時執行指令碼
- oncanplay：當媒體能夠開始播放但可能因緩衝而需要停止時執行指令碼（例如緩衝了一部分）
- oncanplaythrough：當媒體能夠無需因緩衝而停止即可播放至結尾時執行指令碼（例如已緩衝了所有）
- onchange：當元素改變時執行指令碼
- onclick：當單擊滑鼠時執行指令碼
- oncontextmenu：當觸發上下文選單時執行指令碼
- ondblclick：當雙擊滑鼠時執行指令碼
- ondrag：當拖動元素時執行指令碼
- ondragend：當拖動操作結束時執行指令碼
- ondragenter：當元素被拖動至有效的拖放目標時執行指令碼（進入時）
- ondragleave：當元素離開有效拖放目標時執行指令碼（離開時）
- ondragover：當元素被拖動至有效拖放目標上方時執行指令碼（懸上時）
- ondragstart：當拖動操作開始時執行指令碼
- ondrop：當被拖動元素正在被拖放時執行指令碼
- ondurationchange：當媒體長度改變時執行指令碼
- onemptied：當媒體資源元素突然為空時（網路錯誤、載入錯誤等）執行指令碼
- onended：當媒體已抵達結尾時執行指令碼
- onerror：當在元素載入期間發生錯誤時執行指令碼
- onfocus：當獲得焦點時執行指令碼
- onformchange：當表單改變時執行指令碼
- onforminput：當表單獲得使用者輸入時執行指令碼
- oninput：當元素獲得使用者輸入時執行指令碼
- oninvalid：當元素無效時執行指令碼
- onkeydown：當按下按鍵時執行指令碼（還沒鬆開時就觸發）
- onkeypress：當按下並鬆開按鍵時執行指令碼（必須經歷按下、鬆開這一過程才觸發）
- onkeyup：當鬆開按鍵時執行指令碼（鬆開時即觸發）
- onload：當載入時執行指令碼
- onloadeddata：當載入媒體資料時執行指令碼
- onloadedmetadata：當媒體元素的持續時間以及其他媒介資料已載入時執行指令碼
- onloadstart：當瀏覽器開始載入媒介資料時執行指令碼
- onmousedown： 當按下滑鼠按鈕時執行指令碼
- onmousemove：當滑鼠指標移動時執行指令碼
- onmouseout：當滑鼠指標移出元素時執行指令碼
- onmouseover：當滑鼠指標移至元素之上時執行指令碼
- onmouseup：當鬆開滑鼠按鈕時執行指令碼
- onmousewheel： 當轉動滑鼠滾輪時執行指令碼
- onpause：當媒體資料暫停時執行指令碼
- onplay：當媒體資料將要開始播放時執行指令碼
- onplaying：當媒體資料已開始播放時執行指令碼
- onprogress：當瀏覽器正在取媒體資料時執行指令碼
- onratechange：當媒體資料的播放速率改變時執行指令碼
- onreadystatechange：當就緒狀態（ready-state）改變時執行指令碼
- onreset：當表單重置時執行指令碼
- onscroll：當滾動元素滾動元素的滾動條時執行指令碼
- onseeked：當媒體元素的定位屬性不再為真且定位已結束時執行指令碼
- onseeking：當媒介元素的定位屬性為真且定位已開始時執行指令碼
- onselect：當選取元素時執行指令碼
- onshow：
- onstalled：當取回媒體資料過程中（延遲）存在錯誤時執行指令碼
- onsubmit：當提交表單時執行指令碼
- onsuspend：當瀏覽器已在取媒介資料但在取回整個媒體檔案之前停止時執行指令碼
- ontimeupdate：當媒體改變其播放位置時執行指令碼
- onvolumechange：當媒體改變音量亦或當音量被設定為靜音時執行指令碼
- onwaiting：當媒體已停止播放但打算繼續播放時執行指令碼