之前寫過一篇瀏覽器事件的相關(guān)操作和事件運(yùn)行的原理——JavaScript瀏覽器事件解析催什。這一篇主要寫一些常用的事件及一些可能的坑。
表單事件
鍵盤事件
當(dāng) <input>, <textarea> 的值發(fā)生變化時(shí)觸發(fā)。此外携栋，打開 contenteditable 屬性的元素舶得，只要值發(fā)生變化，也會觸發(fā) input 事件毡们。input 事件的一個(gè)特點(diǎn)，就是會連續(xù)觸發(fā)昧辽，比如用戶每次按下一次按鍵衙熔，就會觸發(fā)一次input事件。
此類事件包括: keydown, keyup,
鼠標(biāo)事件
select 事件當(dāng)在<input>, <textarea>中選中文本時(shí)觸發(fā)
change 事件當(dāng)<input>, <select>, <textarea>的值發(fā)生變化時(shí)觸發(fā)搅荞。它與 input 事件的最大不同红氯，就是不會連續(xù)觸發(fā)，只有當(dāng)全部修改完成時(shí)才會觸發(fā)咕痛，而且input事件必然會引發(fā)change事件痢甘。具體來說，分成以下幾種情況:
- 激活單選框(radio)或復(fù)選框(checkbox)時(shí)觸發(fā)茉贡。
- 用戶提交時(shí)觸發(fā)塞栅。比如，從下列列表(select)完成選擇腔丧，在日期或文件輸入框完成選擇放椰。
- 當(dāng)文本框或textarea元素的值發(fā)生改變，并且喪失焦點(diǎn)時(shí)觸發(fā)愉粤。
- reset事件當(dāng)表單重置(所有表單成員變回默認(rèn)值)時(shí)由form元素觸發(fā)砾医。
- submit事件當(dāng)表單數(shù)據(jù)向服務(wù)器提交時(shí)由form元素觸發(fā)。
文檔事件:
beforeunload
beforeunload 事件當(dāng)窗口將要關(guān)閉科汗，或者 document 和網(wǎng)頁資源將要卸載時(shí)觸發(fā)藻烤。它可以用來防止用戶不當(dāng)心關(guān)閉網(wǎng)頁。該事件的默認(rèn)動(dòng)作就是關(guān)閉當(dāng)前窗口或文檔。如果在監(jiān)聽函數(shù)中怖亭，調(diào)用了 event.preventDefault()涎显，或者對事件對象的 returnValue 屬性賦予一個(gè)非空的值，就會自動(dòng)跳出一個(gè)確認(rèn)框兴猩，讓用戶確認(rèn)是否關(guān)閉網(wǎng)頁期吓。如果用戶點(diǎn)擊“取消”按鈕，網(wǎng)頁就不會關(guān)閉倾芝。監(jiān)聽函數(shù)所返回的字符串讨勤，會顯示在確認(rèn)對話框之中:
window.addEventListener('beforeunload', function(event) {
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = '你確認(rèn)要離開嗎？';
}
});
unload 與 load
unload 事件在窗口關(guān)閉或者 document 對象將要卸載時(shí)觸發(fā)晨另，發(fā)生在 window, body, frameset 等對象上面潭千。它的觸發(fā)順序排在 beforeunload, pagehide 事件后面。unload 事件只在頁面沒有被瀏覽器緩存時(shí)才會觸發(fā)借尿，換言之刨晴，如果通過按下“前進(jìn)/后退”導(dǎo)致頁面卸載，并不會觸發(fā) unload 事件路翻。當(dāng) unload 事件發(fā)生時(shí)狈癞，document 對象處于一個(gè)特殊狀態(tài)。所有資源依然存在茂契，但是對用戶來說都不可見蝶桶，UI互動(dòng)(window.open, alert, confirm方法等)全部無效。這時(shí)即使拋出錯(cuò)誤掉冶，也不能停止文檔的卸載提陶。
load事件在頁面加載成功時(shí)觸發(fā)辞做，error事件在頁面加載失敗時(shí)觸發(fā)尖阔。注意丁鹉，頁面從瀏覽器緩存加載，并不會觸發(fā)load事件召锈。
這兩個(gè)事件實(shí)際上屬于進(jìn)度事件，不僅發(fā)生在 document 對象获询，還發(fā)生在各種外部資源上面涨岁。瀏覽網(wǎng)頁就是一個(gè)加載各種資源的過程，圖像(image), 樣式表(style sheet), 腳本(script), 視頻(video), 音頻(audio), Ajax請求(XMLHttpRequest)等等吉嚣。這些資源和document對象, window對象, XMLHttpRequestUpload對象梢薪，都會觸發(fā) load 事件和 error 事件。
pageshow 與 pagehide
pageshow事件尝哆，pagehide事件: 默認(rèn)情況下秉撇，瀏覽器會在當(dāng)前會話(session)緩存頁面，當(dāng)用戶點(diǎn)擊“前進(jìn)/后退”按鈕時(shí)，瀏覽器就會從緩存中加載頁面琐馆。
pageshow 事件在頁面加載時(shí)觸發(fā)规阀，包括第一次加載和從緩存加載兩種情況。如果要指定頁面每次加載(不管是不是從瀏覽器緩存)時(shí)都運(yùn)行的代碼瘦麸，可以放在這個(gè)事件的監(jiān)聽函數(shù)谁撼。第一次加載時(shí)，它的觸發(fā)順序排在load事件后面滋饲。從緩存加載時(shí)厉碟，load 事件不會觸發(fā)，因?yàn)榫W(wǎng)頁在緩存中的樣子通常是 load 事件的監(jiān)聽函數(shù)運(yùn)行后的樣子屠缭，所以不必重復(fù)執(zhí)行箍鼓。同理，如果是從緩存中加載頁面呵曹，網(wǎng)頁內(nèi)初始化的 JavaScript 腳本(比如 DOMContentLoaded 事件的監(jiān)聽函數(shù))也不會執(zhí)行款咖。pageshow 事件有一個(gè) persisted 屬性，返回一個(gè)布爾值逢并。頁面第一次加載時(shí)之剧，這個(gè)屬性是false；當(dāng)頁面從緩存加載時(shí)砍聊，這個(gè)屬性是true背稼。
document.onpageshow = function(event){}
if(event.persisted){
//如果存緩存加載
}
}
同樣的，將這個(gè)屬性設(shè)為 true玻蝌，就表示頁面要保存在緩存中蟹肘；設(shè)為 false ，表示網(wǎng)頁不保存在緩存中俯树，這時(shí)如果設(shè)置了 unload 事件的監(jiān)聽函數(shù)帘腹，該函數(shù)將在 pagehide 事件后立即運(yùn)行。如果頁面包含 frame 许饿，則 frame 頁面的 pageshow 事件和 pagehide 事件阳欲，都會在主頁面之前觸發(fā)。
DOMContentLoaded 和 readystatechange
DOMContentLoaded 事件當(dāng) HTML 文檔下載并解析完成以后陋率，就會在 document 對象上觸發(fā) DOMContentLoaded 事件球化。這時(shí)，僅僅完成了 HTML 文檔的解析(整張頁面的DOM生成)瓦糟，所有外部資源(樣式表, 腳本, iframe等等)可能還沒有下載結(jié)束筒愚。也就是說，這個(gè)事件比 load 事件菩浙，發(fā)生時(shí)間早得多巢掺。注意句伶，網(wǎng)頁的 JavaScript 腳本是同步執(zhí)行的，所以定義 DOMContentLoaded 事件的監(jiān)聽函數(shù)陆淀，應(yīng)該放在所有腳本的最前面倔约。否則腳本一旦發(fā)生堵塞，將推遲觸發(fā) DOMContentLoaded 事件浸剩。此外钾军，IE8 不支持 DOMContentLoaded 事件绢要，可以使用 readystatechange 事件代替重罪。
readystatechange 事件發(fā)生在 Document 對象和 XMLHttpRequest 對象，當(dāng)它的 readyState 屬性發(fā)生變化時(shí)觸發(fā)搅幅。
其他文檔級事件
上面重點(diǎn)提到了 DOMContentLoaded, readystatechange, pageshow, pagehide, unload, load 和 beforeunload 事件蝇更，此外還有一下事件:
- onafterprint: 文檔打印之后運(yùn)行的腳本
- onbeforeprint: 文檔打印之前運(yùn)行的腳本
- onbeforeunload: 文檔卸載之前運(yùn)行的腳本(上文已涉及)
- onerror: 在錯(cuò)誤發(fā)生時(shí)運(yùn)行的腳本
- onhaschange: 當(dāng)文檔已改變時(shí)運(yùn)行的腳本
- onload: 頁面結(jié)束加載之后觸發(fā)(上文已涉及)
- onmessage: 在消息被觸發(fā)時(shí)運(yùn)行的腳本
- onoffline: 當(dāng)文檔離線時(shí)運(yùn)行的腳本
- ononline: 當(dāng)文檔上線時(shí)運(yùn)行的腳本
- onpagehide: 當(dāng)窗口隱藏時(shí)運(yùn)行的腳本(上文已涉及)
- onpageshow: 當(dāng)窗口成為可見時(shí)運(yùn)行的腳本(上文已涉及)
- onpopstate: 當(dāng)窗口歷史記錄改變時(shí)運(yùn)行的腳本
- onredo: 當(dāng)文檔執(zhí)行撤銷（redo）時(shí)運(yùn)行的腳本
- onresize: 當(dāng)瀏覽器窗口被調(diào)整大小時(shí)觸發(fā)
- onstorage: 在 Web Storage 區(qū)域更新后運(yùn)行的腳本
- onundo: 在文檔執(zhí)行 undo 時(shí)運(yùn)行的腳本
- onscroll: 事件在文檔或文檔元素滾動(dòng)時(shí)執(zhí)行腳本
鼠標(biāo)事件 與 MouseEvent對象
new MouseEvent(typeArg, mouseEventInit);
內(nèi)置的鼠標(biāo)事件包括:
- mousedown: 按下鼠標(biāo)
- mouseup: 鼠標(biāo)抬起
- click: 點(diǎn)擊
- dblclick: 雙擊
- mousemove: 鼠標(biāo)移動(dòng)
- mouseover: 鼠標(biāo)移入，冒泡
- mouseout: 鼠標(biāo)移出相嵌，冒泡
- mouseenter: 鼠標(biāo)移入况脆，不冒泡
- mouseleave: 鼠標(biāo)移出跃赚，不冒泡
- contextmenu: 右鍵菜單
- wheel: 滾輪事件
其具有如下常用屬性:
- altKey肤频，ctrlKey算墨，metaKey报咳，shiftKey屬性返回一個(gè)布爾值，表示鼠標(biāo)事件發(fā)生時(shí)，是否按下某個(gè)鍵鸿脓；
- button 返回事件的鼠標(biāo)鍵信息, 值為0(左鍵), 1或4(中鍵, 4為IE中的值)，2(右鍵)蛔溃，可通過switch來選擇執(zhí)行分之)涧衙；
- buttons 屬性返回一個(gè)3個(gè)比特位的值偎捎，表示同時(shí)按下了哪些鍵
- clientX蠢终，clientY 返回鼠標(biāo)位置相對于瀏覽器窗口左上角的坐標(biāo)，單位為像素
- screenX茴她，screenY 返回鼠標(biāo)位置相對于屏幕左上角的坐標(biāo)寻拂，單位為像素
- movementX，movementY 返回一個(gè)位移败京，單位為像素兜喻，表示當(dāng)前位置與上一個(gè) mousemove 事件之間的距離，在數(shù)值上:
currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
currentEvent.movementY = currentEvent.screenY - previousEvent.screenY
- relatedTarget屬性返回事件的次要相關(guān)節(jié)點(diǎn)赡麦，即和target屬性對應(yīng)的節(jié)點(diǎn)朴皆，如: mouseout target 指將要離開的節(jié)點(diǎn)，relatedTarget 指將要進(jìn)入的節(jié)點(diǎn)泛粹。對于那些沒有次要相關(guān)節(jié)點(diǎn)的事件遂铡，該屬性返回null
- wheel 事件是與鼠標(biāo)滾輪相關(guān)的事件，瀏覽器提供一個(gè) WheelEvent 構(gòu)造函數(shù) new WheelEvent(typeArg, mouseEventInit)
- deltaX: 返回一個(gè)數(shù)值晶姊，表示滾輪的水平滾動(dòng)量
- deltaY: 返回一個(gè)數(shù)值扒接，表示滾輪的垂直滾動(dòng)量
- deltaZ: 返回一個(gè)數(shù)值，表示滾輪的Z軸滾動(dòng)量
- deltaMode: 返回一個(gè)數(shù)值们衙，表示滾動(dòng)的單位钾怔，適用于上面三個(gè)屬性。0表示像素蒙挑，1表示行宗侦，2表示頁
鍵盤事件 KeyboardEvent 對象
構(gòu)造函數(shù) new KeyboardEvent(typeArg, KeyboardEventInit)
鍵盤事件包括keydown(按下鍵盤時(shí)觸發(fā)該事件)，keypress(只要按下的鍵并非Ctrl, Alt, Shift和Meta忆蚀，就接著觸發(fā)keypress事件), keyup(松開鍵盤時(shí)觸發(fā)該事件)
- altKey矾利，ctrlKey，metaKey馋袜，shiftKey: 返回一個(gè)布爾值男旗，表示是否按下對應(yīng)的鍵
- key: 返回一個(gè)字符串，表示按下的鍵名欣鳖。如果同時(shí)按下一個(gè)控制鍵和一個(gè)符號鍵察皇，則返回符號鍵的鍵名
- keyCode: 返回按鍵的 ASCII 碼，注意: 這里是不區(qū)分大小寫的泽台，
A鍵不論輸出 A 還是 a keyCode 都是68什荣。在 IE 中使用 witch 屬性
進(jìn)度事件 ProgressEvent對象
new ProgressEvent(type, {
lengthComputable: aBooleanValue, // false as default
loaded: aNumber, // 0 as default
total: aNumber // 0 as default
});
進(jìn)度事件用來描述一個(gè)事件進(jìn)展的過程呀忧，比如XMLHttpRequest對象發(fā)出的HTTP請求的過程, <img>, <audio>, <video>, <style>, <link>加載外部資源的過程，包括下載和上傳溃睹。通常包括以下事件:
- abort事件: 當(dāng)進(jìn)度事件被中止時(shí)觸發(fā)。如果發(fā)生錯(cuò)誤胰坟，導(dǎo)致進(jìn)程中止因篇，不會觸發(fā)該事件。
- error事件: 由于錯(cuò)誤導(dǎo)致資源無法加載時(shí)觸發(fā)笔横，不會冒泡竞滓。error 事件的監(jiān)聽函數(shù)最好放在如 img 元素的 HTML 屬性中。
- load事件: 進(jìn)度成功結(jié)束時(shí)觸發(fā)吹缔。
- loadstart事件: 進(jìn)度開始時(shí)觸發(fā)商佑。
- loadend事件: 進(jìn)度停止時(shí)觸發(fā)，發(fā)生順序排在error事件\abort事件\load事件后面厢塘。loadend事件的監(jiān)聽函數(shù)可以用來取代abort事件/load事件/error事件的監(jiān)聽函數(shù)茶没，loadend事件本身不提供關(guān)于進(jìn)度結(jié)束的原因，但可以用它來做所有進(jìn)度結(jié)束場景都需要做的一些操作晚碾。
- progress事件: 當(dāng)操作處于進(jìn)度之中抓半，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。
- timeout事件: 進(jìn)度超過限時(shí)觸發(fā)
這類事件具有以下屬性:
- lengthComputable: 返回一個(gè)布爾值格嘁，表示當(dāng)前進(jìn)度是否具有可計(jì)算的長度笛求。如果為false，就表示當(dāng)前進(jìn)度無法測量糕簿。
- total: 返回一個(gè)數(shù)值探入，表示當(dāng)前進(jìn)度的總長度。如果是通過 HTTP 下載某個(gè)資源懂诗，表示內(nèi)容本身的長度蜂嗽，不含 HTTP 頭部的長度。如果 lengthComputable 屬性為 false响禽，則 total 屬性就無法取得正確的值徒爹。
- loaded: 返回一個(gè)數(shù)值，表示當(dāng)前進(jìn)度已經(jīng)完成的數(shù)量芋类。該屬性除以total屬性隆嗅，就可以得到目前進(jìn)度的百分比。
//進(jìn)度計(jì)算
if (e.lengthComputable){
var percentComplete = e.loaded / e.total;
}
拖拽事件 DragEvent 對象
new DragEvent(type, DragEventInit);
拖拽指的是侯繁，用戶在某個(gè)對象上按下鼠標(biāo)鍵不放胖喳，拖動(dòng)它到另一個(gè)位置，然后釋放鼠標(biāo)鍵贮竟，將該對象放在那里丽焊。拖拽的對象有好幾種较剃，包括 Element 節(jié)點(diǎn), 圖片, 鏈接, 選中的文字等等。在 HTML 網(wǎng)頁中技健，除了 Element 節(jié)點(diǎn)默認(rèn)不可以拖拽写穴，其他(圖片, 鏈接, 選中的文字)都是可以直接拖拽的。為了讓 Element 節(jié)點(diǎn)可拖拽雌贱，可以將該節(jié)點(diǎn)的 draggable 屬性設(shè)為 true啊送。draggable 屬性可用于任何 Element 節(jié)點(diǎn)，但是圖片(img 元素)和鏈接(a 元素)不加這個(gè)屬性欣孤，就可以拖拽馋没。對于它們，用到這個(gè)屬性的時(shí)候降传，往往是將其設(shè)為 false篷朵，防止拖拽。注意婆排，一旦某個(gè) Element 節(jié)點(diǎn)的 draggable 屬性設(shè)為 true声旺，就無法再用鼠標(biāo)選中該節(jié)點(diǎn)內(nèi)部的文字或子節(jié)點(diǎn)了。
當(dāng)Element節(jié)點(diǎn)或選中的文本被拖拽時(shí)泽论，就會持續(xù)觸發(fā)拖拽事件艾少，包括以下一些事件:
- drag事件: 拖拽過程中，在被拖拽的節(jié)點(diǎn)上持續(xù)觸發(fā)翼悴。
- dragstart事件: 拖拽開始時(shí)在被拖拽的節(jié)點(diǎn)上觸發(fā)缚够，該事件的target屬性是被拖拽的節(jié)點(diǎn)。通常應(yīng)該在這個(gè)事件的監(jiān)聽函數(shù)中鹦赎，指定拖拽的數(shù)據(jù)谍椅。
- dragend事件: 拖拽結(jié)束時(shí)(釋放鼠標(biāo)鍵或按下escape鍵)在被拖拽的節(jié)點(diǎn)上觸發(fā)，該事件的target屬性是被拖拽的節(jié)點(diǎn)古话。它與dragStart事件雏吭，在同一個(gè)節(jié)點(diǎn)上觸發(fā)。不管拖拽是否跨窗口陪踩，或者中途被取消杖们，dragend事件總是會觸發(fā)的。
- dragenter事件: 拖拽進(jìn)入當(dāng)前節(jié)點(diǎn)時(shí)肩狂，在當(dāng)前節(jié)點(diǎn)上觸發(fā)摘完，該事件的target屬性是當(dāng)前節(jié)點(diǎn)。通常應(yīng)該在這個(gè)事件的監(jiān)聽函數(shù)中傻谁，指定是否允許在當(dāng)前節(jié)點(diǎn)放下(drop)拖拽的數(shù)據(jù)孝治。如果當(dāng)前節(jié)點(diǎn)沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當(dāng)前節(jié)點(diǎn)放下數(shù)據(jù)谈飒。在視覺上顯示拖拽進(jìn)入當(dāng)前節(jié)點(diǎn)岂座，也是在這個(gè)事件的監(jiān)聽函數(shù)中設(shè)置。
- dragover事件: 拖拽到當(dāng)前節(jié)點(diǎn)上方時(shí)杭措，在當(dāng)前節(jié)點(diǎn)上持續(xù)觸發(fā)费什，該事件的target屬性是當(dāng)前節(jié)點(diǎn)。該事件與dragenter事件基本類似手素，默認(rèn)會重置當(dāng)前的拖拽事件的效果(DataTransfer對象的dropEffect屬性)為none吕喘，即不允許放下被拖拽的節(jié)點(diǎn)，所以如果允許在當(dāng)前節(jié)點(diǎn)drop數(shù)據(jù)刑桑，通常會使用preventDefault方法，取消重置拖拽效果為none募舟。
- dragleave事件: 拖拽離開當(dāng)前節(jié)點(diǎn)范圍時(shí)祠斧，在當(dāng)前節(jié)點(diǎn)上觸發(fā)，該事件的target屬性是當(dāng)前節(jié)點(diǎn)拱礁。在視覺上顯示拖拽離開當(dāng)前節(jié)點(diǎn)琢锋，就在這個(gè)事件的監(jiān)聽函數(shù)中設(shè)置。
- drop事件: 被拖拽的節(jié)點(diǎn)或選中的文本呢灶，釋放到目標(biāo)節(jié)點(diǎn)時(shí)吴超，在目標(biāo)節(jié)點(diǎn)上觸發(fā)。注意鸯乃，如果當(dāng)前節(jié)點(diǎn)不允許drop鲸阻，即使在該節(jié)點(diǎn)上方松開鼠標(biāo)鍵，也不會觸發(fā)該事件缨睡。如果用戶按下Escape鍵鸟悴，取消這個(gè)操作，也不會觸發(fā)該事件奖年。該事件的監(jiān)聽函數(shù)負(fù)責(zé)取出拖拽數(shù)據(jù)细诸，并進(jìn)行相關(guān)處理。
關(guān)于拖拽事件陋守，有以下幾點(diǎn)注意事項(xiàng):
- 拖拽過程只觸發(fā)以上這些拖拽事件震贵，盡管鼠標(biāo)在移動(dòng)，但是鼠標(biāo)事件不會觸發(fā)水评。
- 將文件從操作系統(tǒng)拖拽進(jìn)瀏覽器猩系，不會觸發(fā) dragStart 和 dragend 事件。
- dragenter 和 dragover 事件的監(jiān)聽函數(shù)之碗，用來指定可以放下(drop)拖拽的數(shù)據(jù)蝙眶。由于網(wǎng)頁的大部分區(qū)域不適合作為 drop 的目標(biāo)節(jié)點(diǎn)，所以這兩個(gè)事件的默認(rèn)設(shè)置為當(dāng)前節(jié)點(diǎn)不允許 drop。如果想要在目標(biāo)節(jié)點(diǎn)上 drop 拖拽的數(shù)據(jù)幽纷，首先必須阻止這兩個(gè)事件的默認(rèn)行為式塌，或者取消這兩個(gè)事件。
<div ondragover="return false">
//或
<div ondragover="event.preventDefault()">
- 拖拽事件用一個(gè) DragEvent 對象表示友浸，該對象繼承 MouseEvent 對象峰尝，DragEvent 對象只有一個(gè)獨(dú)有的屬性 dataTransfer，其他都是繼承的屬性收恢。dataTransfer 屬性用來讀寫拖拽事件中傳輸?shù)臄?shù)據(jù)武学，所有的拖拽事件都有一個(gè) dataTransfer 屬性，用來保存需要傳遞的數(shù)據(jù)伦意，這個(gè)屬性的值是一個(gè) DataTransfer 對象火窒。拖拽的數(shù)據(jù)保存兩方面的數(shù)據(jù): 數(shù)據(jù)的種類(又稱格式)和數(shù)據(jù)的值。數(shù)據(jù)的種類是一個(gè)MIME字符串驮肉，比如 text/plain 或者 image/jpg熏矿，數(shù)據(jù)的值是一個(gè)字符串;
dataTransfer 對象的屬性的值是一個(gè)對象，其中包括以下屬性:
- dropEffect 屬性: 設(shè)置放下(drop)被拖拽節(jié)點(diǎn)時(shí)的效果离钝，可能的值包括 copy(復(fù)制被拖拽的節(jié)點(diǎn)), move(移動(dòng)被拖拽的節(jié)點(diǎn)), link(創(chuàng)建指向被拖拽的節(jié)點(diǎn)的鏈接), none(無法放下被拖拽的節(jié)點(diǎn))票编。設(shè)置除此以外的值，都是無效的卵渴。
- effectAllowed 屬性: 設(shè)置本次拖拽中允許的效果慧域，可能的值包括 copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized(默認(rèn)值，等同于 all)浪读。如果某種效果是不允許的昔榴，用戶就無法在目標(biāo)節(jié)點(diǎn)中達(dá)成這種效果。
- files 屬性: 是一個(gè) FileList 對象碘橘，包含一組本地文件论泛，可以用來在拖拽操作中傳送。如果本次拖拽不涉及文件蛹屿，則屬性為空的 FileList 對象屁奏。通過files屬性讀取拖拽文件的信息。如果想要讀取文件內(nèi)容错负，就要使用 FileReader 對象坟瓢。
- types 屬性: 是一個(gè)數(shù)組，保存每一次拖拽的數(shù)據(jù)格式犹撒，如'text/uri-list'
- setData() 方法: 用來設(shè)置事件所帶有的指定類型的數(shù)據(jù)折联。它接受兩個(gè)參數(shù)，第一個(gè)是數(shù)據(jù)類型识颊，第二個(gè)是具體數(shù)據(jù)诚镰。如果指定的類型在現(xiàn)有數(shù)據(jù)中不存在奕坟，則該類型將寫入types屬性；如果已經(jīng)存在清笨，在該類型的現(xiàn)有數(shù)據(jù)將被替換月杉。
event.dataTransfer.setData("text/plain", "Text to drag");
- getData() 方法接受一個(gè)字符串(表示數(shù)據(jù)類型)作為參數(shù)，返回事件所帶的指定類型的數(shù)據(jù)(通常是用 setData 方法添加的數(shù)據(jù))抠艾。如果指定類型的數(shù)據(jù)不存在苛萎，則返回空字符串。
event.dataTransfer.getData(types[0]);
- clearData() 方法接受一個(gè)字符串(表示數(shù)據(jù)類型)作為參數(shù)检号，刪除事件所帶的指定類型的數(shù)據(jù)腌歉。如果沒有指定類型，則刪除所有數(shù)據(jù)齐苛。如果指定類型不存在翘盖，則原數(shù)據(jù)不受影響。
event.dataTransfer.clearData("text/uri-list");
- setDragImage() 可以用來自定義這張圖片凹蜂，它接受三個(gè)參數(shù)最仑，第一個(gè)是img圖片元素或者canvas元素，如果省略或?yàn)閚ull則使用被拖動(dòng)的節(jié)點(diǎn)的外觀炊甲，第二個(gè)和第三個(gè)參數(shù)為鼠標(biāo)相對于該圖片左上角的橫坐標(biāo)和右坐標(biāo)。
event.dataTransfer.setDragImage(img, 0, 0);
觸摸事件
new Touch(touchInit);
觸摸事件包括以下5種:
- touchstart: 用戶接觸觸摸屏?xí)r觸發(fā)欲芹，它的 target 屬性返回發(fā)生觸摸的 Element 節(jié)點(diǎn)(IE10+中使用 mspointerdown 事件);
- touchend: 用戶不再接觸觸摸屏?xí)r(或者移出屏幕邊緣時(shí))觸發(fā)卿啡，它的 target 屬性與 touchstart 事件的 target 屬性是一致的，它的 changedTouches 屬性返回一個(gè)TouchList對象菱父，包含所有不再觸摸的觸摸點(diǎn)(Touch對象)(IE10+中使用 mspointerup 事件);
- touchmove: 用戶移動(dòng)觸摸點(diǎn)時(shí)觸發(fā)颈娜，它的 target 屬性與 touchstart 事件的 target 屬性一致。如果觸摸的半徑, 角度, 力度發(fā)生變化浙宜，也會觸發(fā)該事件官辽。(IE10+中使用 mspointermove 事件);
- touchenter: 當(dāng)觸點(diǎn)進(jìn)入某個(gè) element 時(shí)觸發(fā)。此事件沒有冒泡過程粟瞬。(IE10+中使用 mspointerover 事件);
- touchleave: 當(dāng)觸點(diǎn)離開某個(gè) element 時(shí)觸發(fā)同仆。此事件沒有冒泡過程。(IE10+中使用 mspointerout 事件);
- touchcancel: 當(dāng)觸點(diǎn)由于某些原因被中斷時(shí)觸發(fā)裙品。有幾種可能的原因如下(具體的原因根據(jù)不同的設(shè)備和瀏覽器有所不同):(IE10+中沒有對應(yīng)事件);
- 由于某個(gè)事件取消了觸摸: 例如觸摸過程被一個(gè)模態(tài)的彈出框或電話打斷;
- 觸點(diǎn)離開了文檔窗口俗批，而進(jìn)入了瀏覽器的界面元素, 插件或者其他外部內(nèi)容區(qū)域;
- 當(dāng)用戶產(chǎn)生的觸點(diǎn)個(gè)數(shù)超過了設(shè)備支持的個(gè)數(shù)，從而導(dǎo)致 TouchList 中最早的 Touch 對象被取消市怎。
觸摸 API 由三個(gè)對象組成岁忘。每個(gè) Touch 對象代表一個(gè)觸點(diǎn); 每個(gè)觸點(diǎn)都由其位置，大小区匠，形狀干像，壓力大小，和目標(biāo) element 描述。 TouchList 對象代表多個(gè)觸點(diǎn)的一個(gè)列表麻汰。具體包括以下屬性:
- identifier 屬性: 表示touch實(shí)例的獨(dú)一無二的識別符速客。它在整個(gè)觸摸過程中保持不變(IE10+中使用 pointerId 屬性);
- screenX/screenY 屬性: 分別表示觸摸點(diǎn)相對于屏幕左上角的橫坐標(biāo)和縱坐標(biāo)，與頁面是否滾動(dòng)無關(guān);
- clientX/clientY 屬性: 分別表示觸摸點(diǎn)相對于瀏覽器視口左上角的橫坐標(biāo)和縱坐標(biāo)什乙，與頁面是否滾動(dòng)無關(guān);
- pageX/pageY 屬性: 分別表示觸摸點(diǎn)相對于當(dāng)前頁面左上角的橫坐標(biāo)和縱坐標(biāo)挽封，包含了頁面滾動(dòng)帶來的位移;
- radiusX/radiusY 屬性: 分別返回觸摸點(diǎn)周圍受到影響的橢圓范圍的X軸和Y軸，單位為像素;
- rotationAngle 屬性: 表示觸摸區(qū)域的橢圓的旋轉(zhuǎn)角度臣镣，單位為度數(shù)辅愿，在0到90度之間。指尖接觸屏幕忆某，觸摸范圍會形成一個(gè)橢圓点待，這三個(gè)屬性就用來描述這個(gè)橢圓區(qū)域(IE10+中使用 rotation 屬性);
- force 屬性: 返回一個(gè)0到1之間的數(shù)值，表示觸摸壓力弃舒。0代表沒有壓力癞埠，1代表硬件所能識別的最大壓力(IE10+中使用 pressure 屬性,取值0 - 255);
- target 屬性: 返回一個(gè)Element節(jié)點(diǎn)，代表觸摸發(fā)生的那個(gè)節(jié)點(diǎn)聋呢。當(dāng)這個(gè)觸點(diǎn)最開始被跟蹤時(shí)(在 touchstart 事件中), 觸點(diǎn)位于的HTML元素.哪怕在觸點(diǎn)移動(dòng)過程中, 觸點(diǎn)的位置已經(jīng)離開了這個(gè)元素的有效交互區(qū)域, 或者這個(gè)元素已經(jīng)被從文檔中移除. 需要注意的是, 如果這個(gè)元素在觸摸過程中被移除, 這個(gè)事件仍然會指向它, 但是不會再冒泡這個(gè)事件到 window 或 document 對象. 因此, 如果有元素在觸摸過程中可能被移除, 最佳實(shí)踐是將觸摸事件的監(jiān)聽器綁定到這個(gè)元素本身, 防止元素被移除后, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 只讀屬性.
- altKey/ctrlKey/metaKey/shiftKey 都為只讀屬性: 返回一個(gè)布爾值苗踪，表示觸摸的同時(shí)，是否按下某個(gè)鍵
- changedTouches 屬性: 返回一個(gè) TouchList 對象削锰，包含了由當(dāng)前觸摸事件引發(fā)的所有Touch對象(即相關(guān)的觸摸點(diǎn))通铲。它包含了代表所有從上一次觸摸事件到此次事件過程中，狀態(tài)發(fā)生了改變的觸點(diǎn)的 Touch 對象器贩。只讀屬性恋拍。
- targetTouches屬性: 返回一個(gè) TouchList 對象芥炭，包含了觸摸的目標(biāo) Element 節(jié)點(diǎn)內(nèi)部逾苫，所有仍然處于活動(dòng)狀態(tài)的觸摸點(diǎn)氛濒。
- touches 屬性返回一個(gè) TouchList 對象(類數(shù)組的對象)，包含了所有當(dāng)前接觸觸摸平面的觸點(diǎn)的 Touch 對象唆姐，無論它們的起始于哪個(gè) element 上拗慨，也無論它們狀態(tài)是否發(fā)生了變化。只讀屬性
- type 屬性: 指此次觸摸事件的類型奉芦。
- target屬性: 此次觸摸事件的目標(biāo) element 胆描。這個(gè)目標(biāo)元素對應(yīng) TouchEvent.changedTouches 中的觸點(diǎn)的起始元素(在之后的事件類型中有說明)，但是請注意: 此次事件中其他的觸點(diǎn)的起始元素可能有所不同仗阅。以防萬一昌讲，應(yīng)使用和每一個(gè)單獨(dú)觸點(diǎn)相關(guān)聯(lián)的目標(biāo) 。
以下是 IE10+ 中的其他屬性：
- hwTimestamp: 創(chuàng)建事件時(shí)間(毫秒);
- isPrimary: 表示該時(shí)間是否是主事件;
- pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示觸摸設(shè)備;
- tilt[X|Y]: 筆的傾斜程度;
舉一個(gè)簡單例子：
function handleMove(evt) {
evt.preventDefault(); // 阻止瀏覽器繼續(xù)處理觸摸事件减噪，也阻止發(fā)出鼠標(biāo)事件
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);
}
}
對于跨平臺交互短绸，我封裝了一個(gè) tap相關(guān)事件如下：
//以下代碼并未兼容低版本 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);
}
當(dāng)然本文僅僅列舉了一些常用事件车吹，其實(shí)事件還有很多，本文會在必要的時(shí)候繼續(xù)更新醋闭，但即便如此也不可能窮盡所有的事件窄驹，比如還有動(dòng)畫事件: animationstart, animation, animationend 等等。
