之前寫過一篇瀏覽器事件的相關操作和事件執行的原理——JavaScript瀏覽器事件解析。這一篇主要寫一些常用的事件及一些可能的坑。

表單事件

鍵盤事件

當 <input>, <textarea> 的值發生變化時觸發。此外，開啟 contenteditable 屬性的元素，只要值發生變化，也會觸發 input 事件。input 事件的一個特點，就是會連續觸發，比如使用者每次按下一次按鍵，就會觸發一次input事件。

此類事件包括: keydown, keyup,

滑鼠事件

select 事件當在<input>, <textarea>

change 事件當<input>, <select>, <textarea>的值發生變化時觸發。它與 input 事件的最大不同，就是不會連續觸發，只有當全部修改完成時才會觸發，而且input事件必然會引發change事件。具體來說，分成以下幾種情況:

• 啟用單選框(radio)或複選框(checkbox)時觸發。
• 使用者提交時觸發。比如，從下列列表(select)完成選擇，在日期或檔案輸入框完成選擇。
• 當文字框或textarea元素的值發生改變，並且喪失焦點時觸發。
• reset事件當表單重置(所有表單成員變回預設值)時由form元素觸發。
• submit事件當表單資料向伺服器提交時由form元素觸發。

文件事件:

beforeunload

beforeunload 事件當視窗將要關閉，或者 document 和網頁資源將要解除安裝時觸發。它可以用來防止使用者不當心關閉網頁。該事件的預設動作就是關閉當前視窗或文件。如果在監聽函式中，呼叫了 event.preventDefault()，或者對事件物件的 returnValue 屬性賦予一個非空的值，就會自動跳出一個確認框，讓使用者確認是否關閉網頁。如果使用者點選“取消”按鈕，網頁就不會關閉。監聽函式所返回的字串，會顯示在確認對話方塊之中:

  window.addEventListener('beforeunload'
 
, function(event) {
    if(event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = '你確認要離開嗎？';
    }
  });

unload 與 load

unload 事件在視窗關閉或者 document 物件將要解除安裝時觸發，發生在 window, body, frameset 等物件上面。它的觸發順序排在 beforeunload, pagehide 事件後面。unload 事件只在頁面沒有被瀏覽器快取時才會觸發，換言之，如果通過按下“前進/後退”導致頁面解除安裝，並不會觸發 unload 事件。當 unload 事件發生時，document 物件處於一個特殊狀態。所有資源依然存在，但是對使用者來說都不可見，UI互動(window.open, alert, confirm方法等)全部無效。這時即使丟擲錯誤，也不能停止文件的解除安裝。

load事件在頁面載入成功時觸發，error事件在頁面載入失敗時觸發。注意，頁面從瀏覽器快取載入，並不會觸發load事件。

這兩個事件實際上屬於進度事件，不僅發生在 document 物件，還發生在各種外部資源上面。瀏覽網頁就是一個載入各種資源的過程，影象(image), 樣式表(style sheet), 指令碼(script), 視訊(video), 音訊(audio), Ajax請求(XMLHttpRequest)等等。這些資源和document物件, window物件, XMLHttpRequestUpload物件，都會觸發 load 事件和 error 事件。

pageshow 與 pagehide

pageshow事件，pagehide事件: 預設情況下，瀏覽器會在當前會話(session)快取頁面，當用戶點選“前進/後退”按鈕時，瀏覽器就會從快取中載入頁面。
pageshow 事件在頁面載入時觸發，包括第一次載入和從快取載入兩種情況。如果要指定頁面每次載入(不管是不是從瀏覽器快取)時都執行的程式碼，可以放在這個事件的監聽函式。第一次載入時，它的觸發順序排在load事件後面。從快取載入時，load 事件不會觸發，因為網頁在快取中的樣子通常是 load 事件的監聽函式執行後的樣子，所以不必重複執行。同理，如果是從快取中載入頁面，網頁內初始化的 JavaScript 指令碼(比如 DOMContentLoaded 事件的監聽函式)也不會執行。pageshow 事件有一個 persisted 屬性，返回一個布林值。頁面第一次載入時，這個屬性是false；當頁面從快取載入時，這個屬性是true。

document.onpageshow = function(event){}
  if(event.persisted){
    //如果存快取載入
  }
}

同樣的，將這個屬性設為 true，就表示頁面要儲存在快取中；設為 false ，表示網頁不儲存在快取中，這時如果設定了 unload 事件的監聽函式，該函式將在 pagehide 事件後立即執行。如果頁面包含 frame ，則 frame 頁面的 pageshow 事件和 pagehide 事件，都會在主頁面之前觸發。

DOMContentLoaded 和 readystatechange

DOMContentLoaded 事件當 HTML 文件下載並解析完成以後，就會在 document 物件上觸發 DOMContentLoaded 事件。這時，僅僅完成了 HTML 文件的解析(整張頁面的DOM生成)，所有外部資源(樣式表, 指令碼, iframe等等)可能還沒有下載結束。也就是說，這個事件比 load 事件，發生時間早得多。注意，網頁的 JavaScript 指令碼是同步執行的，所以定義 DOMContentLoaded 事件的監聽函式，應該放在所有指令碼的最前面。否則指令碼一旦發生堵塞，將推遲觸發 DOMContentLoaded 事件。此外，IE8 不支援 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。

readystatechange 事件發生在 Document 物件和 XMLHttpRequest 物件，當它的 readyState 屬性發生變化時觸發。

其他文件級事件

上面重點提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件，此外還有一下事件:

• onafterprint: 文件列印之後執行的指令碼
• onbeforeprint: 文件列印之前執行的指令碼
• onbeforeunload: 文件解除安裝之前執行的指令碼(上文已涉及)
• onerror: 在錯誤發生時執行的指令碼
• onhaschange: 當文件已改變時執行的指令碼
• onload: 頁面結束載入之後觸發(上文已涉及)
• onmessage: 在訊息被觸發時執行的指令碼
• onoffline: 當文件離線時執行的指令碼
• ononline: 當文件上線時執行的指令碼
• onpagehide: 當視窗隱藏時執行的指令碼(上文已涉及)
• onpageshow: 當視窗成為可見時執行的指令碼(上文已涉及)
• onpopstate: 當視窗歷史記錄改變時執行的指令碼
• onredo: 當文件執行撤銷（redo）時執行的指令碼
• onresize: 當瀏覽器視窗被調整大小時觸發
• onstorage: 在 Web Storage 區域更新後執行的指令碼
• onundo: 在文件執行 undo 時執行的指令碼
• onscroll: 事件在文件或文件元素滾動時執行指令碼

滑鼠事件 與 MouseEvent物件

new MouseEvent(typeArg, mouseEventInit);

內建的滑鼠事件包括:

1. mousedown: 按下滑鼠
2. mouseup: 滑鼠擡起
3. click: 點選
4. dblclick: 雙擊
5. mousemove: 滑鼠移動
6. mouseover: 滑鼠移入，冒泡
7. mouseout: 滑鼠移出，冒泡
8. mouseenter: 滑鼠移入，不冒泡
9. mouseleave: 滑鼠移出，不冒泡
10. contextmenu: 右鍵選單
11. wheel: 滾輪事件

其具有如下常用屬性:

• altKey，ctrlKey，metaKey，shiftKey屬性返回一個布林值，表示滑鼠事件發生時，是否按下某個鍵；
• button 返回事件的滑鼠鍵資訊, 值為0(左鍵), 1或4(中鍵, 4為IE中的值)，2(右鍵)，可通過switch來選擇執行分之)；
• buttons 屬性返回一個3個位元位的值，表示同時按下了哪些鍵
• clientX，clientY 返回滑鼠位置相對於瀏覽器視窗左上角的座標，單位為畫素
• screenX，screenY 返回滑鼠位置相對於螢幕左上角的座標，單位為畫素
• movementX，movementY 返回一個位移，單位為畫素，表示當前位置與上一個 mousemove 事件之間的距離，在數值上:

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY

• relatedTarget屬性返回事件的次要相關節點，即和target屬性對應的節點，如: mouseout target 指將要離開的節點，relatedTarget 指將要進入的節點。對於那些沒有次要相關節點的事件，該屬性返回null
• wheel 事件是與滑鼠滾輪相關的事件，瀏覽器提供一個 WheelEvent 建構函式 new WheelEvent(typeArg, mouseEventInit)
• deltaX: 返回一個數值，表示滾輪的水平滾動量
• deltaY: 返回一個數值，表示滾輪的垂直滾動量
• deltaZ: 返回一個數值，表示滾輪的Z軸滾動量
• deltaMode: 返回一個數值，表示滾動的單位，適用於上面三個屬性。0表示畫素，1表示行，2表示頁

鍵盤事件 KeyboardEvent 物件

建構函式 new KeyboardEvent(typeArg, KeyboardEventInit)

鍵盤事件包括keydown(按下鍵盤時觸發該事件)，keypress(只要按下的鍵並非Ctrl, Alt, Shift和Meta，就接著觸發keypress事件), keyup(鬆開鍵盤時觸發該事件)

• altKey，ctrlKey，metaKey，shiftKey: 返回一個布林值，表示是否按下對應的鍵
• key: 返回一個字串，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名
• keyCode: 返回按鍵的 ASCII 碼，注意: 這裡是不區分大小寫的，A鍵不論輸出 A 還是 a keyCode 都是68。在 IE 中使用 witch 屬性

進度事件 ProgressEvent物件

new ProgressEvent(type, {
  lengthComputable: aBooleanValue,    // false as default
  loaded: aNumber,                    // 0 as default
  total: aNumber                      // 0 as default
});

進度事件用來描述一個事件進展的過程，比如XMLHttpRequest物件發出的HTTP請求的過程, <img>, <audio>, <video>, <style>, <link>載入外部資源的過程，包括下載和上傳。通常包括以下事件:

1. abort事件: 當進度事件被中止時觸發。如果發生錯誤，導致程序中止，不會觸發該事件。
2. error事件: 由於錯誤導致資源無法載入時觸發，不會冒泡。error 事件的監聽函式最好放在如 img 元素的 HTML 屬性中。
3. load事件: 進度成功結束時觸發。
4. loadstart事件: 進度開始時觸發。
5. loadend事件: 進度停止時觸發，發生順序排在error事件\abort事件\load事件後面。loadend事件的監聽函式可以用來取代abort事件/load事件/error事件的監聽函式，loadend事件本身不提供關於進度結束的原因，但可以用它來做所有進度結束場景都需要做的一些操作。
6. progress事件: 當操作處於進度之中，由傳輸的資料塊不斷觸發。
7. timeout事件: 進度超過限時觸發

這類事件具有以下屬性:

• lengthComputable: 返回一個布林值，表示當前進度是否具有可計算的長度。如果為false，就表示當前進度無法測量。
• total: 返回一個數值，表示當前進度的總長度。如果是通過 HTTP 下載某個資源，表示內容本身的長度，不含 HTTP 頭部的長度。如果 lengthComputable 屬性為 false，則 total 屬性就無法取得正確的值。
• loaded: 返回一個數值，表示當前進度已經完成的數量。該屬性除以total屬性，就可以得到目前進度的百分比。

//進度計算
if (e.lengthComputable){
  var percentComplete = e.loaded / e.total;
}

拖拽事件 DragEvent 物件

new DragEvent(type, DragEventInit);

拖拽指的是，使用者在某個物件上按下滑鼠鍵不放，拖動它到另一個位置，然後釋放滑鼠鍵，將該物件放在那裡。拖拽的物件有好幾種，包括 Element 節點, 圖片, 連結, 選中的文字等等。在 HTML 網頁中，除了 Element 節點預設不可以拖拽，其他(圖片, 連結, 選中的文字)都是可以直接拖拽的。為了讓 Element 節點可拖拽，可以將該節點的 draggable 屬性設為 true。draggable 屬性可用於任何 Element 節點，但是圖片(img 元素)和連結(a 元素)不加這個屬性，就可以拖拽。對於它們，用到這個屬性的時候，往往是將其設為 false，防止拖拽。注意，一旦某個 Element 節點的 draggable 屬性設為 true，就無法再用滑鼠選中該節點內部的文字或子節點了。

當Element節點或選中的文字被拖拽時，就會持續觸發拖拽事件，包括以下一些事件:

1. drag事件: 拖拽過程中，在被拖拽的節點上持續觸發。
2. dragstart事件: 拖拽開始時在被拖拽的節點上觸發，該事件的target屬性是被拖拽的節點。通常應該在這個事件的監聽函式中，指定拖拽的資料。
3. dragend事件: 拖拽結束時(釋放滑鼠鍵或按下escape鍵)在被拖拽的節點上觸發，該事件的target屬性是被拖拽的節點。它與dragStart事件，在同一個節點上觸發。不管拖拽是否跨視窗，或者中途被取消，dragend事件總是會觸發的。
4. dragenter事件: 拖拽進入當前節點時，在當前節點上觸發，該事件的target屬性是當前節點。通常應該在這個事件的監聽函式中，指定是否允許在當前節點放下(drop)拖拽的資料。如果當前節點沒有該事件的監聽函式，或者監聽函式不執行任何操作，就意味著不允許在當前節點放下資料。在視覺上顯示拖拽進入當前節點，也是在這個事件的監聽函式中設定。
5. dragover事件: 拖拽到當前節點上方時，在當前節點上持續觸發，該事件的target屬性是當前節點。該事件與dragenter事件基本類似，預設會重置當前的拖拽事件的效果(DataTransfer物件的dropEffect屬性)為none，即不允許放下被拖拽的節點，所以如果允許在當前節點drop資料，通常會使用preventDefault方法，取消重置拖拽效果為none。
6. dragleave事件: 拖拽離開當前節點範圍時，在當前節點上觸發，該事件的target屬性是當前節點。在視覺上顯示拖拽離開當前節點，就在這個事件的監聽函式中設定。
7. drop事件: 被拖拽的節點或選中的文字，釋放到目標節點時，在目標節點上觸發。注意，如果當前節點不允許drop，即使在該節點上方鬆開滑鼠鍵，也不會觸發該事件。如果使用者按下Escape鍵，取消這個操作，也不會觸發該事件。該事件的監聽函式負責取出拖拽資料，並進行相關處理。

關於拖拽事件，有以下幾點注意事項:

1. 拖拽過程只觸發以上這些拖拽事件，儘管滑鼠在移動，但是滑鼠事件不會觸發。
2. 將檔案從作業系統拖拽進瀏覽器，不會觸發 dragStart 和 dragend 事件。
3. dragenter 和 dragover 事件的監聽函式，用來指定可以放下(drop)拖拽的資料。由於網頁的大部分割槽域不適合作為 drop 的目標節點，所以這兩個事件的預設設定為當前節點不允許 drop。如果想要在目標節點上 drop 拖拽的資料，首先必須阻止這兩個事件的預設行為，或者取消這兩個事件。

<div ondragover="return false">
//或
<div ondragover="event.preventDefault()">

1. 拖拽事件用一個 DragEvent 物件表示，該物件繼承 MouseEvent 物件，DragEvent 物件只有一個獨有的屬性 dataTransfer，其他都是繼承的屬性。dataTransfer 屬性用來讀寫拖拽事件中傳輸的資料，所有的拖拽事件都有一個 dataTransfer 屬性，用來儲存需要傳遞的資料，這個屬性的值是一個 DataTransfer 物件。拖拽的資料儲存兩方面的資料: 資料的種類(又稱格式)和資料的值。資料的種類是一個MIME字串，比如 text/plain 或者 image/jpg，資料的值是一個字串;

dataTransfer 物件的屬性的值是一個物件，其中包括以下屬性:

• dropEffect 屬性: 設定放下(drop)被拖拽節點時的效果，可能的值包括 copy(複製被拖拽的節點), move(移動被拖拽的節點), link(建立指向被拖拽的節點的連結), none(無法放下被拖拽的節點)。設定除此以外的值，都是無效的。
• effectAllowed 屬性: 設定本次拖拽中允許的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(預設值，等同於 all)。如果某種效果是不允許的，使用者就無法在目標節點中達成這種效果。
• files 屬性: 是一個 FileList 物件，包含一組本地檔案，可以用來在拖拽操作中傳送。如果本次拖拽不涉及檔案，則屬性為空的 FileList 物件。通過files屬性讀取拖拽檔案的資訊。如果想要讀取檔案內容，就要使用 FileReader 物件。
• types 屬性: 是一個數組，儲存每一次拖拽的資料格式，如’text/uri-list’
• setData() 方法: 用來設定事件所帶有的指定型別的資料。它接受兩個引數，第一個是資料型別，第二個是具體資料。如果指定的型別在現有資料中不存在，則該型別將寫入types屬性；如果已經存在，在該型別的現有資料將被替換。

event.dataTransfer.setData("text/plain", "Text to drag");

• getData() 方法接受一個字串(表示資料型別)作為引數，返回事件所帶的指定型別的資料(通常是用 setData 方法新增的資料)。如果指定型別的資料不存在，則返回空字串。

event.dataTransfer.getData(types[0]);

• clearData() 方法接受一個字串(表示資料型別)作為引數，刪除事件所帶的指定型別的資料。如果沒有指定型別，則刪除所有資料。如果指定型別不存在，則原資料不受影響。

event.dataTransfer.clearData("text/uri-list");

• setDragImage() 可以用來自定義這張圖片，它接受三個引數，第一個是img圖片元素或者canvas元素，如果省略或為null則使用被拖動的節點的外觀，第二個和第三個引數為滑鼠相對於該圖片左上角的橫座標和右座標。

event.dataTransfer.setDragImage(img, 0, 0);

觸控事件

 new Touch(touchInit);

觸控事件包括以下5種:

1. touchstart: 使用者接觸觸控式螢幕時觸發，它的 target 屬性返回發生觸控的 Element 節點(IE10+中使用 mspointerdown 事件);
2. touchend: 使用者不再接觸觸控式螢幕時(或者移出螢幕邊緣時)觸發，它的 target 屬性與 touchstart 事件的 target 屬性是一致的，它的 changedTouches 屬性返回一個TouchList物件，包含所有不再觸控的觸控點(Touch物件)(IE10+中使用 mspointerup 事件);
3. touchmove: 使用者移動觸控點時觸發，它的 target 屬性與 touchstart 事件的 target 屬性一致。如果觸控的半徑, 角度, 力度發生變化，也會觸發該事件。(IE10+中使用 mspointermove 事件);
4. touchenter: 當觸點進入某個 element 時觸發。此事件沒有冒泡過程。(IE10+中使用 mspointerover 事件);
5. touchleave: 當觸點離開某個 element 時觸發。此事件沒有冒泡過程。(IE10+中使用 mspointerout 事件);
6. touchcancel: 當觸點由於某些原因被中斷時觸發。有幾種可能的原因如下(具體的原因根據不同的裝置和瀏覽器有所不同):(IE10+中沒有對應事件);
   
   • 1. 由於某個事件取消了觸控: 例如觸控過程被一個模態的彈出框或電話打斷;
   • 1. 觸點離開了文件視窗，而進入了瀏覽器的介面元素, 外掛或者其他外部內容區域;
   • 1. 當用戶產生的觸點個數超過了裝置支援的個數，從而導致 TouchList 中最早的 Touch 物件被取消。

觸控 API 由三個物件組成。每個 Touch 物件代表一個觸點; 每個觸點都由其位置，大小，形狀，壓力大小，和目標 element 描述。 TouchList 物件代表多個觸點的一個列表。具體包括以下屬性:

• identifier 屬性: 表示touch例項的獨一無二的識別符。它在整個觸控過程中保持不變(IE10+中使用 pointerId 屬性);
• screenX/screenY 屬性: 分別表示觸控點相對於螢幕左上角的橫座標和縱座標，與頁面是否滾動無關;
• clientX/clientY 屬性: 分別表示觸控點相對於瀏覽器視口左上角的橫座標和縱座標，與頁面是否滾動無關;
• pageX/pageY 屬性: 分別表示觸控點相對於當前頁面左上角的橫座標和縱座標，包含了頁面滾動帶來的位移;
• radiusX/radiusY 屬性: 分別返回觸控點周圍受到影響的橢圓範圍的X軸和Y軸，單位為畫素;
• rotationAngle 屬性: 表示觸控區域的橢圓的旋轉角度，單位為度數，在0到90度之間。指尖接觸螢幕，觸控範圍會形成一個橢圓，這三個屬性就用來描述這個橢圓區域(IE10+中使用 rotation 屬性);
• force 屬性: 返回一個0到1之間的數值，表示觸控壓力。0代表沒有壓力，1代表硬體所能識別的最大壓力(IE10+中使用 pressure 屬性,取值0 - 255);
• target 屬性: 返回一個Element節點，代表觸控發生的那個節點。當這個觸點最開始被跟蹤時(在 touchstart 事件中), 觸點位於的HTML元素.哪怕在觸點移動過程中, 觸點的位置已經離開了這個元素的有效互動區域, 或者這個元素已經被從文件中移除. 需要注意的是, 如果這個元素在觸控過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 window 或 document 物件. 因此, 如果有元素在觸控過程中可能被移除, 最佳實踐是將觸控事件的監聽器繫結到這個元素本身, 防止元素被移除後, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 只讀屬性.
• altKey/ctrlKey/metaKey/shiftKey 都為只讀屬性: 返回一個布林值，表示觸控的同時，是否按下某個鍵
• changedTouches 屬性: 返回一個 TouchList 物件，包含了由當前觸控事件引發的所有Touch物件(即相關的觸控點)。它包含了代表所有從上一次觸控事件到此次事件過程中，狀態發生了改變的觸點的 Touch 物件。只讀屬性。
• targetTouches屬性: 返回一個 TouchList 物件，包含了觸控的目標 Element 節點內部，所有仍然處於活動狀態的觸控點。
• touches 屬性返回一個 TouchList 物件(類陣列的物件)，包含了所有當前接觸觸控平面的觸點的 Touch 物件，無論它們的起始於哪個 element 上，也無論它們狀態是否發生了變化。只讀屬性
• type 屬性: 指此次觸控事件的型別。
• target屬性: 此次觸控事件的目標 element 。這個目標元素對應 TouchEvent.changedTouches 中的觸點的起始元素(在之後的事件型別中有說明)，但是請注意: 此次事件中其他的觸點的起始元素可能有所不同。以防萬一，應使用和每一個單獨觸點相關聯的目標 。

以下是 IE10+ 中的其他屬性：

• hwTimestamp: 建立事件時間(毫秒);
• isPrimary: 表示該時間是否是主事件;
• pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示觸控裝置;
• tilt[X|Y]: 筆的傾斜程度;

舉一個簡單例子：

function handleMove(evt) {
  evt.preventDefault(); // 阻止瀏覽器繼續處理觸控事件，也阻止發出滑鼠事件
  var touches = evt.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    var id = touches[i].identifier;
    var touch = touches.identifiedTouch(id);
    console.log(touch.pageX, touch.pageY);
  }
}

對於跨平臺互動，我封裝了一個 tap相關事件如下：

//以下程式碼並未相容低版本 IE
function addTapListener(node, callback){
  var startEvent = window.onmousedown ? window.onmspointerdown ? 'mspointerdow' : 'mousedown' : 'touchstart';
  var event = window.onclick ? 'click' : 'touch';
  var endEvent = window.onmouseup ? 'mouseup' : 'touchend';

  node.addEventListener(startEvent, function(e){
    var tap = document.createEvent('CustomEvent');
    tap.initCustomEvent('tapstart', true, true, null);
    node.dispatchEvent(tap);
  });
  node.addEventListener(event, function(e){
    var tap = document.createEvent('CustomEvent');
    tap.initCustomEvent('tap', true, true, null);
    node.dispatchEvent(tap);
  });
  node.addEventListener(endEvent, function(e){
    var tap = document.createEvent('CustomEvent');
    tap.initCustomEvent('tapend', true, true, null);
    node.dispatchEvent(tap);
  });

  node.addEventListener('tap', callback);
}

當然本文僅僅列舉了一些常用事件，其實事件還有很多，本文會在必要的時候繼續更新，但即便如此也不可能窮盡所有的事件，比如還有動畫事件: animationstart, animation, animationend 等等。