當 input , textarea 的值發(fā)生變化時觸發(fā)。此外，打開 contenteditable 屬性的元素，只要值發(fā)生變化，也會觸發(fā) input 事件。input 事件的一個特點，就是會連續(xù)觸發(fā)，比如用戶每次按下一次按鍵，就會觸發(fā)一次input事件。

此類事件包括: keydown, keyup,

select 事件當在 input , textarea 中選中文本時觸發(fā)

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

激活單選框(radio)或復選框(checkbox)時觸發(fā)。

用戶提交時觸發(fā)。比如，從下列列表(select)完成選擇，在日期或文件輸入框完成選擇。

當文本框或textarea元素的值發(fā)生改變，并且喪失焦點時觸發(fā)。

reset事件當表單重置(所有表單成員變回默認值)時由form元素觸發(fā)。

submit事件當表單數(shù)據(jù)向服務器提交時由form元素觸發(fā)。

beforeunload 事件當窗口將要關閉，或者 document 和網(wǎng)頁資源將要卸載時觸發(fā)。它可以用來防止用戶不當心關閉網(wǎng)頁。該事件的默認動作就是關閉當前窗口或文檔。如果在監(jiān)聽函數(shù)中，調(diào)用了 event.preventDefault()，或者對事件對象的 returnValue 屬性賦予一個非空的值，就會自動跳出一個確認框，讓用戶確認是否關閉網(wǎng)頁。如果用戶點擊“取消”按鈕，網(wǎng)頁就不會關閉。監(jiān)聽函數(shù)所返回的字符串，會顯示在確認對話框之中:

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

unload 事件在窗口關閉或者 document 對象將要卸載時觸發(fā)，發(fā)生在 window, body, frameset 等對象上面。它的觸發(fā)順序排在 beforeunload, pagehide 事件后面。unload 事件只在頁面沒有被瀏覽器緩存時才會觸發(fā)，換言之，如果通過按下“前進/后退”導致頁面卸載，并不會觸發(fā) unload 事件。當 unload 事件發(fā)生時，document 對象處于一個特殊狀態(tài)。所有資源依然存在，但是對用戶來說都不可見，UI互動(window.open, alert, confirm方法等)全部無效。這時即使拋出錯誤，也不能停止文檔的卸載。

load事件在頁面加載成功時觸發(fā)，error事件在頁面加載失敗時觸發(fā)。注意，頁面從瀏覽器緩存加載，并不會觸發(fā)load事件。

這兩個事件實際上屬于進度事件，不僅發(fā)生在 document 對象，還發(fā)生在各種外部資源上面。瀏覽網(wǎng)頁就是一個加載各種資源的過程，圖像(image), 樣式表(style sheet), 腳本(script), 視頻(video), 音頻(audio), html' target='_blank'>Ajax請求(XMLHttpRequest)等等。這些資源和document對象, window對象, XMLHttpRequestUpload對象，都會觸發(fā) load 事件和 error 事件。

pageshow事件，pagehide事件: 默認情況下，瀏覽器會在當前會話(session)緩存頁面，當用戶點擊“前進/后退”按鈕時，瀏覽器就會從緩存中加載頁面。
pageshow 事件在頁面加載時觸發(fā)，包括第一次加載和從緩存加載兩種情況。如果要指定頁面每次加載(不管是不是從瀏覽器緩存)時都運行的代碼，可以放在這個事件的監(jiān)聽函數(shù)。第一次加載時，它的觸發(fā)順序排在load事件后面。從緩存加載時，load 事件不會觸發(fā)，因為網(wǎng)頁在緩存中的樣子通常是 load 事件的監(jiān)聽函數(shù)運行后的樣子，所以不必重復執(zhí)行。同理，如果是從緩存中加載頁面，網(wǎng)頁內(nèi)初始化的 JavaScript 腳本(比如 DOMContentLoaded 事件的監(jiān)聽函數(shù))也不會執(zhí)行。pageshow 事件有一個 persisted 屬性，返回一個布爾值。頁面第一次加載時，這個屬性是false；當頁面從緩存加載時，這個屬性是true。

document.onpageshow = function(event){} if(event.persisted){ //如果存緩存加載}

同樣的，將這個屬性設為 true，就表示頁面要保存在緩存中；設為 false ，表示網(wǎng)頁不保存在緩存中，這時如果設置了 unload 事件的監(jiān)聽函數(shù)，該函數(shù)將在 pagehide 事件后立即運行。如果頁面包含 frame ，則 frame 頁面的 pageshow 事件和 pagehide 事件，都會在主頁面之前觸發(fā)。

DOMContentLoaded 事件當 HTML 文檔下載并解析完成以后，就會在 document 對象上觸發(fā) DOMContentLoaded 事件。這時，僅僅完成了 HTML 文檔的解析(整張頁面的DOM生成)，所有外部資源(樣式表, 腳本, iframe等等)可能還沒有下載結束。也就是說，這個事件比 load 事件，發(fā)生時間早得多。注意，網(wǎng)頁的 JavaScript 腳本是同步執(zhí)行的，所以定義 DOMContentLoaded 事件的監(jiān)聽函數(shù)，應該放在所有腳本的最前面。否則腳本一旦發(fā)生堵塞，將推遲觸發(fā) DOMContentLoaded 事件。此外，IE8 不支持 DOMContentLoaded 事件，可以使用 readystatechange 事件代替。

readystatechange 事件發(fā)生在 Document 對象和 XMLHttpRequest 對象，當它的 readyState 屬性發(fā)生變化時觸發(fā)。

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

onafterprint: 文檔打印之后運行的腳本

onbeforeprint: 文檔打印之前運行的腳本

onbeforeunload: 文檔卸載之前運行的腳本(上文已涉及)

onerror: 在錯誤發(fā)生時運行的腳本

onhaschange: 當文檔已改變時運行的腳本

onload: 頁面結束加載之后觸發(fā)(上文已涉及)

onmessage: 在消息被觸發(fā)時運行的腳本

onoffline: 當文檔離線時運行的腳本

ononline: 當文檔上線時運行的腳本

onpagehide: 當窗口隱藏時運行的腳本(上文已涉及)

onpageshow: 當窗口成為可見時運行的腳本(上文已涉及)

onpopstate: 當窗口歷史記錄改變時運行的腳本

onredo: 當文檔執(zhí)行撤銷（redo）時運行的腳本

onresize: 當瀏覽器窗口被調(diào)整大小時觸發(fā)

onstorage: 在 Web Storage 區(qū)域更新后運行的腳本

onundo: 在文檔執(zhí)行 undo 時運行的腳本

onscroll: 事件在文檔或文檔元素滾動時執(zhí)行腳本

new MouseEvent(typeArg, mouseEventInit);

內(nèi)置的鼠標事件包括:

mousedown: 按下鼠標

mouseup: 鼠標抬起

click: 點擊

dblclick: 雙擊

mousemove: 鼠標移動

mouseover: 鼠標移入，冒泡

mouseout: 鼠標移出，冒泡

mouseenter: 鼠標移入，不冒泡

mouseleave: 鼠標移出，不冒泡

contextmenu: 右鍵菜單

wheel: 滾輪事件

其具有如下常用屬性:

altKey，ctrlKey，metaKey，shiftKey屬性返回一個布爾值，表示鼠標事件發(fā)生時，是否按下某個鍵；

button 返回事件的鼠標鍵信息, 值為0(左鍵), 1或4(中鍵, 4為IE中的值)，2(右鍵)，可通過switch來選擇執(zhí)行分之)；

buttons 屬性返回一個3個比特位的值，表示同時按下了哪些鍵

clientX，clientY 返回鼠標位置相對于瀏覽器窗口左上角的坐標，單位為像素

screenX，screenY 返回鼠標位置相對于屏幕左上角的坐標，單位為像素

movementX，movementY 返回一個位移，單位為像素，表示當前位置與上一個 mousemove 事件之間的距離，在數(shù)值上:

relatedTarget屬性返回事件的次要相關節(jié)點，即和target屬性對應的節(jié)點，如: mouseout target 指將要離開的節(jié)點，relatedTarget 指將要進入的節(jié)點。對于那些沒有次要相關節(jié)點的事件，該屬性返回null

wheel 事件是與鼠標滾輪相關的事件，瀏覽器提供一個 WheelEvent 構造函數(shù) new WheelEvent(typeArg, mouseEventInit)

deltaX: 返回一個數(shù)值，表示滾輪的水平滾動量

deltaY: 返回一個數(shù)值，表示滾輪的垂直滾動量

deltaZ: 返回一個數(shù)值，表示滾輪的Z軸滾動量

deltaMode: 返回一個數(shù)值，表示滾動的單位，適用于上面三個屬性。0表示像素，1表示行，2表示頁

構造函數(shù) new KeyboardEvent(typeArg, KeyboardEventInit)

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

altKey，ctrlKey，metaKey，shiftKey: 返回一個布爾值，表示是否按下對應的鍵

key: 返回一個字符串，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名

keyCode: 返回按鍵的 ASCII 碼，注意: 這里是不區(qū)分大小寫的，A鍵不論輸出 A 還是 a keyCode 都是68。在 IE 中使用 witch 屬性

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

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

abort事件: 當進度事件被中止時觸發(fā)。如果發(fā)生錯誤，導致進程中止，不會觸發(fā)該事件。

error事件: 由于錯誤導致資源無法加載時觸發(fā)，不會冒泡。error 事件的監(jiān)聽函數(shù)最好放在如 img 元素的 HTML 屬性中。

load事件: 進度成功結束時觸發(fā)。

loadstart事件: 進度開始時觸發(fā)。

loadend事件: 進度停止時觸發(fā)，發(fā)生順序排在error事件abort事件load事件后面。loadend事件的監(jiān)聽函數(shù)可以用來取代abort事件/load事件/error事件的監(jiān)聽函數(shù)，loadend事件本身不提供關于進度結束的原因，但可以用它來做所有進度結束場景都需要做的一些操作。

progress事件: 當操作處于進度之中，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。

timeout事件: 進度超過限時觸發(fā)

這類事件具有以下屬性:

lengthComputable: 返回一個布爾值，表示當前進度是否具有可計算的長度。如果為false，就表示當前進度無法測量。

total: 返回一個數(shù)值，表示當前進度的總長度。如果是通過 HTTP 下載某個資源，表示內(nèi)容本身的長度，不含 HTTP 頭部的長度。如果 lengthComputable 屬性為 false，則 total 屬性就無法取得正確的值。

loaded: 返回一個數(shù)值，表示當前進度已經(jīng)完成的數(shù)量。該屬性除以total屬性，就可以得到目前進度的百分比。

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

new DragEvent(type, DragEventInit);

拖拽指的是，用戶在某個對象上按下鼠標鍵不放，拖動它到另一個位置，然后釋放鼠標鍵，將該對象放在那里。拖拽的對象有好幾種，包括 Element 節(jié)點, 圖片, 鏈接, 選中的文字等等。在 HTML 網(wǎng)頁中，除了 Element 節(jié)點默認不可以拖拽，其他(圖片, 鏈接, 選中的文字)都是可以直接拖拽的。為了讓 Element 節(jié)點可拖拽，可以將該節(jié)點的 draggable 屬性設為 true。draggable 屬性可用于任何 Element 節(jié)點，但是圖片(img 元素)和鏈接(a 元素)不加這個屬性，就可以拖拽。對于它們，用到這個屬性的時候，往往是將其設為 false，防止拖拽。注意，一旦某個 Element 節(jié)點的 draggable 屬性設為 true，就無法再用鼠標選中該節(jié)點內(nèi)部的文字或子節(jié)點了。

當Element節(jié)點或選中的文本被拖拽時，就會持續(xù)觸發(fā)拖拽事件，包括以下一些事件:

drag事件: 拖拽過程中，在被拖拽的節(jié)點上持續(xù)觸發(fā)。

dragstart事件: 拖拽開始時在被拖拽的節(jié)點上觸發(fā)，該事件的target屬性是被拖拽的節(jié)點。通常應該在這個事件的監(jiān)聽函數(shù)中，指定拖拽的數(shù)據(jù)。

dragend事件: 拖拽結束時(釋放鼠標鍵或按下escape鍵)在被拖拽的節(jié)點上觸發(fā)，該事件的target屬性是被拖拽的節(jié)點。它與dragStart事件，在同一個節(jié)點上觸發(fā)。不管拖拽是否跨窗口，或者中途被取消，dragend事件總是會觸發(fā)的。

dragenter事件: 拖拽進入當前節(jié)點時，在當前節(jié)點上觸發(fā)，該事件的target屬性是當前節(jié)點。通常應該在這個事件的監(jiān)聽函數(shù)中，指定是否允許在當前節(jié)點放下(drop)拖拽的數(shù)據(jù)。如果當前節(jié)點沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當前節(jié)點放下數(shù)據(jù)。在視覺上顯示拖拽進入當前節(jié)點，也是在這個事件的監(jiān)聽函數(shù)中設置。

dragover事件: 拖拽到當前節(jié)點上方時，在當前節(jié)點上持續(xù)觸發(fā)，該事件的target屬性是當前節(jié)點。該事件與dragenter事件基本類似，默認會重置當前的拖拽事件的效果(DataTransfer對象的dropEffect屬性)為none，即不允許放下被拖拽的節(jié)點，所以如果允許在當前節(jié)點drop數(shù)據(jù)，通常會使用preventDefault方法，取消重置拖拽效果為none。

dragleave事件: 拖拽離開當前節(jié)點范圍時，在當前節(jié)點上觸發(fā)，該事件的target屬性是當前節(jié)點。在視覺上顯示拖拽離開當前節(jié)點，就在這個事件的監(jiān)聽函數(shù)中設置。

drop事件: 被拖拽的節(jié)點或選中的文本，釋放到目標節(jié)點時，在目標節(jié)點上觸發(fā)。注意，如果當前節(jié)點不允許drop，即使在該節(jié)點上方松開鼠標鍵，也不會觸發(fā)該事件。如果用戶按下Escape鍵，取消這個操作，也不會觸發(fā)該事件。該事件的監(jiān)聽函數(shù)負責取出拖拽數(shù)據(jù)，并進行相關處理。

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

拖拽過程只觸發(fā)以上這些拖拽事件，盡管鼠標在移動，但是鼠標事件不會觸發(fā)。

將文件從操作系統(tǒng)拖拽進瀏覽器，不會觸發(fā) dragStart 和 dragend 事件。

dragenter 和 dragover 事件的監(jiān)聽函數(shù)，用來指定可以放下(drop)拖拽的數(shù)據(jù)。由于網(wǎng)頁的大部分區(qū)域不適合作為 drop 的目標節(jié)點，所以這兩個事件的默認設置為當前節(jié)點不允許 drop。如果想要在目標節(jié)點上 drop 拖拽的數(shù)據(jù)，首先必須阻止這兩個事件的默認行為，或者取消這兩個事件。

 p ondragover= return false  p ondragover= event.preventDefault() 

拖拽事件用一個 DragEvent 對象表示，該對象繼承 MouseEvent 對象，DragEvent 對象只有一個獨有的屬性 dataTransfer，其他都是繼承的屬性。dataTransfer 屬性用來讀寫拖拽事件中傳輸?shù)臄?shù)據(jù)，所有的拖拽事件都有一個 dataTransfer 屬性，用來保存需要傳遞的數(shù)據(jù)，這個屬性的值是一個 DataTransfer 對象。拖拽的數(shù)據(jù)保存兩方面的數(shù)據(jù): 數(shù)據(jù)的種類(又稱格式)和數(shù)據(jù)的值。數(shù)據(jù)的種類是一個MIME字符串，比如 text/plain 或者 image/jpg，數(shù)據(jù)的值是一個字符串;

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

dropEffect 屬性: 設置放下(drop)被拖拽節(jié)點時的效果，可能的值包括 copy(復制被拖拽的節(jié)點), move(移動被拖拽的節(jié)點), link(創(chuàng)建指向被拖拽的節(jié)點的鏈接), none(無法放下被拖拽的節(jié)點)。設置除此以外的值，都是無效的。

effectAllowed 屬性: 設置本次拖拽中允許的效果，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默認值，等同于 all)。如果某種效果是不允許的，用戶就無法在目標節(jié)點中達成這種效果。

files 屬性: 是一個 FileList 對象，包含一組本地文件，可以用來在拖拽操作中傳送。如果本次拖拽不涉及文件，則屬性為空的 FileList 對象。通過files屬性讀取拖拽文件的信息。如果想要讀取文件內(nèi)容，就要使用 FileReader 對象。

types 屬性: 是一個數(shù)組，保存每一次拖拽的數(shù)據(jù)格式，如 text/uri-list

setData() 方法: 用來設置事件所帶有的指定類型的數(shù)據(jù)。它接受兩個參數(shù)，第一個是數(shù)據(jù)類型，第二個是具體數(shù)據(jù)。如果指定的類型在現(xiàn)有數(shù)據(jù)中不存在，則該類型將寫入types屬性；如果已經(jīng)存在，在該類型的現(xiàn)有數(shù)據(jù)將被替換。

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

getData() 方法接受一個字符串(表示數(shù)據(jù)類型)作為參數(shù)，返回事件所帶的指定類型的數(shù)據(jù)(通常是用 setData 方法添加的數(shù)據(jù))。如果指定類型的數(shù)據(jù)不存在，則返回空字符串。

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

clearData() 方法接受一個字符串(表示數(shù)據(jù)類型)作為參數(shù)，刪除事件所帶的指定類型的數(shù)據(jù)。如果沒有指定類型，則刪除所有數(shù)據(jù)。如果指定類型不存在，則原數(shù)據(jù)不受影響。

event.dataTransfer.clearData( text/uri-list 

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

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

 new Touch(touchInit);

觸摸事件包括以下5種:

touchstart: 用戶接觸觸摸屏時觸發(fā)，它的 target 屬性返回發(fā)生觸摸的 Element 節(jié)點(IE10+中使用 mspointerdown 事件);

touchend: 用戶不再接觸觸摸屏時(或者移出屏幕邊緣時)觸發(fā)，它的 target 屬性與 touchstart 事件的 target 屬性是一致的，它的 changedTouches 屬性返回一個TouchList對象，包含所有不再觸摸的觸摸點(Touch對象)(IE10+中使用 mspointerup 事件);

touchmove: 用戶移動觸摸點時觸發(fā)，它的 target 屬性與 touchstart 事件的 target 屬性一致。如果觸摸的半徑, 角度, 力度發(fā)生變化，也會觸發(fā)該事件。(IE10+中使用 mspointermove 事件);

touchenter: 當觸點進入某個 element 時觸發(fā)。此事件沒有冒泡過程。(IE10+中使用 mspointerover 事件);

touchleave: 當觸點離開某個 element 時觸發(fā)。此事件沒有冒泡過程。(IE10+中使用 mspointerout 事件);

touchcancel: 當觸點由于某些原因被中斷時觸發(fā)。有幾種可能的原因如下(具體的原因根據(jù)不同的設備和瀏覽器有所不同):(IE10+中沒有對應事件);

由于某個事件取消了觸摸: 例如觸摸過程被一個模態(tài)的彈出框或電話打斷;

觸點離開了文檔窗口，而進入了瀏覽器的界面元素, 插件或者其他外部內(nèi)容區(qū)域;

當用戶產(chǎn)生的觸點個數(shù)超過了設備支持的個數(shù)，從而導致 TouchList 中最早的 Touch 對象被取消。

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

identifier 屬性: 表示touch實例的獨一無二的識別符。它在整個觸摸過程中保持不變(IE10+中使用 pointerId 屬性);

screenX/screenY 屬性: 分別表示觸摸點相對于屏幕左上角的橫坐標和縱坐標，與頁面是否滾動無關;

clientX/clientY 屬性: 分別表示觸摸點相對于瀏覽器視口左上角的橫坐標和縱坐標，與頁面是否滾動無關;

pageX/pageY 屬性: 分別表示觸摸點相對于當前頁面左上角的橫坐標和縱坐標，包含了頁面滾動帶來的位移;

radiusX/radiusY 屬性: 分別返回觸摸點周圍受到影響的橢圓范圍的X軸和Y軸，單位為像素;

rotationAngle 屬性: 表示觸摸區(qū)域的橢圓的旋轉角度，單位為度數(shù)，在0到90度之間。指尖接觸屏幕，觸摸范圍會形成一個橢圓，這三個屬性就用來描述這個橢圓區(qū)域(IE10+中使用 rotation 屬性);

force 屬性: 返回一個0到1之間的數(shù)值，表示觸摸壓力。0代表沒有壓力，1代表硬件所能識別的最大壓力(IE10+中使用 pressure 屬性,取值0 - 255);

target 屬性: 返回一個Element節(jié)點，代表觸摸發(fā)生的那個節(jié)點。當這個觸點最開始被跟蹤時(在 touchstart 事件中), 觸點位于的HTML元素.哪怕在觸點移動過程中, 觸點的位置已經(jīng)離開了這個元素的有效交互區(qū)域, 或者這個元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 window 或 document 對象. 因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監(jiān)聽器綁定到這個元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 只讀屬性.

altKey/ctrlKey/metaKey/shiftKey 都為只讀屬性: 返回一個布爾值，表示觸摸的同時，是否按下某個鍵

changedTouches 屬性: 返回一個 TouchList 對象，包含了由當前觸摸事件引發(fā)的所有Touch對象(即相關的觸摸點)。它包含了代表所有從上一次觸摸事件到此次事件過程中，狀態(tài)發(fā)生了改變的觸點的 Touch 對象。只讀屬性。

targetTouches屬性: 返回一個 TouchList 對象，包含了觸摸的目標 Element 節(jié)點內(nèi)部，所有仍然處于活動狀態(tài)的觸摸點。

touches 屬性返回一個 TouchList 對象(類數(shù)組的對象)，包含了所有當前接觸觸摸平面的觸點的 Touch 對象，無論它們的起始于哪個 element 上，也無論它們狀態(tài)是否發(fā)生了變化。只讀屬性

type 屬性: 指此次觸摸事件的類型。

target屬性: 此次觸摸事件的目標 element 。這個目標元素對應 TouchEvent.changedTouches 中的觸點的起始元素(在之后的事件類型中有說明)，但是請注意: 此次事件中其他的觸點的起始元素可能有所不同。以防萬一，應使用和每一個單獨觸點相關聯(lián)的目標 。

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

hwTimestamp: 創(chuàng)建事件時間(毫秒);

isPrimary: 表示該時間是否是主事件;

pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示觸摸設備;

tilt[X|Y]: 筆的傾斜程度;

舉一個簡單例子：

function handleMove(evt) { evt.preventDefault(); // 阻止瀏覽器繼續(xù)處理觸摸事件，也阻止發(fā)出鼠標事件 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);}

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

相關推薦：

解析javascript 瀏覽器關閉事件_javascript技巧

JavaScript中的跨瀏覽器事件（圖文教程）

以上就是瀏覽器中5種常用的事件解析的詳細內(nèi)容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。