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

表單事件

鍵盤事件

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

此類事件包括: keydown, keyup,

鼠標(biāo)事件

select 事件當(dāng)在<input>, <textarea>中選中文本時(shí)觸發(fā)

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

文檔事件:

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è)非空的值，就會(huì)自動(dòng)跳出一個(gè)確認(rèn)框，讓用戶確認(rèn)是否關(guān)閉網(wǎng)頁。如果用戶點(diǎn)擊“取消”按鈕，網(wǎng)頁就不會(huì)關(guān)閉。監(jiān)聽函數(shù)所返回的字符串，會(huì)顯示在確認(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í)才會(huì)觸發(fā)，換言之，如果通過按下“前進(jìn)/后退”導(dǎo)致頁面卸載，并不會(huì)觸發(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ā)。注意，頁面從瀏覽器緩存加載，并不會(huì)觸發(fā)load事件。

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

pageshow 與 pagehide

pageshow事件，pagehide事件: 默認(rèn)情況下，瀏覽器會(huì)在當(dāng)前會(huì)話(session)緩存頁面，當(dāng)用戶點(diǎn)擊“前進(jìn)/后退”按鈕時(shí)，瀏覽器就會(huì)從緩存中加載頁面。
pageshow 事件在頁面加載時(shí)觸發(fā)，包括第一次加載和從緩存加載兩種情況。如果要指定頁面每次加載(不管是不是從瀏覽器緩存)時(shí)都運(yùn)行的代碼，可以放在這個(gè)事件的監(jiān)聽函數(shù)。第一次加載時(shí)，它的觸發(fā)順序排在load事件后面。從緩存加載時(shí)，load 事件不會(huì)觸發(fā)，因?yàn)榫W(wǎng)頁在緩存中的樣子通常是 load 事件的監(jiān)聽函數(shù)運(yùn)行后的樣子，所以不必重復(fù)執(zhí)行。同理，如果是從緩存中加載頁面，網(wǎng)頁內(nèi)初始化的 JavaScript 腳本(比如 DOMContentLoaded 事件的監(jiān)聽函數(shù))也不會(huì)執(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 事件，都會(huì)在主頁面之前觸發(fā)。

DOMContentLoaded 和 readystatechange

DOMContentLoaded 事件當(dāng) HTML 文檔下載并解析完成以后，就會(huì)在 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 事件，此外還有一下事件:

鼠標(biāo)事件 與 MouseEvent對象

new MouseEvent(typeArg, mouseEventInit);

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

1. mousedown: 按下鼠標(biāo)

2. mouseup: 鼠標(biāo)抬起

3. click: 點(diǎn)擊

4. dblclick: 雙擊

5. mousemove: 鼠標(biāo)移動(dòng)

6. mouseover: 鼠標(biāo)移入，冒泡

7. mouseout: 鼠標(biāo)移出，冒泡

8. mouseenter: 鼠標(biāo)移入，不冒泡

9. mouseleave: 鼠標(biāo)移出，不冒泡

10. contextmenu: 右鍵菜單

11. wheel: 滾輪事件

其具有如下常用屬性:

鍵盤事件 KeyboardEvent 對象

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

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

進(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>加載外部資源的過程，包括下載和上傳。通常包括以下事件:

1. abort事件: 當(dāng)進(jìn)度事件被中止時(shí)觸發(fā)。如果發(fā)生錯(cuò)誤，導(dǎo)致進(jìn)程中止，不會(huì)觸發(fā)該事件。

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

3. load事件: 進(jìn)度成功結(jié)束時(shí)觸發(fā)。

4. loadstart事件: 進(jìn)度開始時(shí)觸發(fā)。

5. 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é)束場景都需要做的一些操作。

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

7. timeout事件: 進(jìn)度超過限時(shí)觸發(fā)

這類事件具有以下屬性:

//進(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í)，就會(huì)持續(xù)觸發(fā)拖拽事件，包括以下一些事件:

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

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

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

4. 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è)置。

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

6. 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è)置。

7. 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)鍵，也不會(huì)觸發(fā)該事件。如果用戶按下Escape鍵，取消這個(gè)操作，也不會(huì)觸發(fā)該事件。該事件的監(jiān)聽函數(shù)負(fù)責(zé)取出拖拽數(shù)據(jù)，并進(jìn)行相關(guān)處理。

關(guān)于拖拽事件，有以下幾點(diǎn)注意事項(xiàng):

1. 拖拽過程只觸發(fā)以上這些拖拽事件，盡管鼠標(biāo)在移動(dòng)，但是鼠標(biāo)事件不會(huì)觸發(fā)。

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

3. 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è)事件。

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

1. 拖拽事件用一個(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è)對象，其中包括以下屬性:

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

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

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

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

觸摸事件

 new Touch(touchInit);

觸摸事件包括以下5種:

1. touchstart: 用戶接觸觸摸屏?xí)r觸發(fā)，它的 target 屬性返回發(fā)生觸摸的 Element 節(jié)點(diǎn)(IE10+中使用 mspointerdown 事件);

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

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

4. touchenter: 當(dāng)觸點(diǎn)進(jìn)入某個(gè) element 時(shí)觸發(fā)。此事件沒有冒泡過程。(IE10+中使用 mspointerover 事件);

5. touchleave: 當(dāng)觸點(diǎn)離開某個(gè) element 時(shí)觸發(fā)。此事件沒有冒泡過程。(IE10+中使用 mspointerout 事件);

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

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

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

3. 當(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è)列表。具體包括以下屬性:

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

舉一個(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);
 }
}

對于跨平臺(tái)交互，我封裝了一個(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í)事件還有很多，本文會(huì)在必要的時(shí)候繼續(xù)更新，但即便如此也不可能窮盡所有的事件，比如還有動(dòng)畫事件: animationstart, animation, animationend 等等。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com