瀏覽器中5種常用的事件解析

本篇文章給大家帶來的內容是關於瀏覽器中常用的事件解析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

表單事件

鍵盤事件

當 <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 拖拽的資料，首先必須阻止這兩個事件的預設行為，或者取消這兩個事件。

<p ondragover="return false">//或<p 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 方法添加的資料)。如果指定類型的資料不存在，則返回Null 字元串。

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. 由於某個事件取消了觸摸: 例如觸摸過程被一個模態的彈出框或電話打斷;

2. 觸點離開了文件視窗，而進入了瀏覽器的介面元素, 外掛程式或者其他外部內容地區;

3. 當使用者產生的觸點個數超過了裝置支援的個數，從而導致 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相關事件如下：

//以下代碼並未相容低版本 IEfunction 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 等等。