最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 15:23:41
文檔

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

瀏覽器中5種常用的事件解析:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于瀏覽器中常用的事件解析,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。表單事件鍵盤事件當 <input>, <textarea> 的值發(fā)生變化時觸發(fā)。此外,打開 contenteditable 屬性的元素,只
推薦度:
導(dǎo)讀瀏覽器中5種常用的事件解析:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于瀏覽器中常用的事件解析,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。表單事件鍵盤事件當 <input>, <textarea> 的值發(fā)生變化時觸發(fā)。此外,打開 contenteditable 屬性的元素,只

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于瀏覽器中常用的事件解析,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

表單事件

鍵盤事件

<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)或復(fù)選框(checkbox)時觸發(fā)。

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

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

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

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

  • 文檔事件:

    beforeunload

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

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

    unload 與 load

    unload 事件在窗口關(guān)閉或者 document 對象將要卸載時觸發(fā),發(fā)生在 window, body, frameset 等對象上面。它的觸發(fā)順序排在 beforeunload, pagehide 事件后面。unload 事件只在頁面沒有被瀏覽器緩存時才會觸發(fā),換言之,如果通過按下“前進/后退”導(dǎo)致頁面卸載,并不會觸發(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), Ajax請求(XMLHttpRequest)等等。這些資源和document對象, window對象, XMLHttpRequestUpload對象,都會觸發(fā) load 事件和 error 事件。

    pageshow 與 pagehide

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

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

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

    DOMContentLoaded 和 readystatechange

    DOMContentLoaded 事件當 HTML 文檔下載并解析完成以后,就會在 document 對象上觸發(fā) DOMContentLoaded 事件。這時,僅僅完成了 HTML 文檔的解析(整張頁面的DOM生成),所有外部資源(樣式表, 腳本, iframe等等)可能還沒有下載結(jié)束。也就是說,這個事件比 load 事件,發(fā)生時間早得多。注意,網(wǎng)頁的 JavaScript 腳本是同步執(zhí)行的,所以定義 DOMContentLoaded 事件的監(jiān)聽函數(shù),應(yīng)該放在所有腳本的最前面。否則腳本一旦發(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: 頁面結(jié)束加載之后觸發(fā)(上文已涉及)

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

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

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

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

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

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

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

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

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

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

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

  • 鼠標事件 與 MouseEvent對象

    new MouseEvent(typeArg, mouseEventInit);

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

    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屬性返回一個布爾值,表示鼠標事件發(fā)生時,是否按下某個鍵;

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

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

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

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

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

  • currentEvent.movementX = currentEvent.screenX - previousEvent.screenX
    currentEvent.movementY = currentEvent.screenY - previousEvent.screenY
  • relatedTarget屬性返回事件的次要相關(guān)節(jié)點,即和target屬性對應(yīng)的節(jié)點,如: mouseout target 指將要離開的節(jié)點,relatedTarget 指將要進入的節(jié)點。對于那些沒有次要相關(guān)節(jié)點的事件,該屬性返回null

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

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

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

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

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

  • 鍵盤事件 KeyboardEvent 對象

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

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

  • altKey,ctrlKey,metaKey,shiftKey: 返回一個布爾值,表示是否按下對應(yīng)的鍵

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

  • keyCode: 返回按鍵的 ASCII 碼,注意: 這里是不區(qū)分大小寫的,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對象發(fā)出的HTTP請求的過程, <img>, <audio>, <video>, <style>, <link>加載外部資源的過程,包括下載和上傳。通常包括以下事件:

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

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

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

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

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

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

    7. 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;
    }

    拖拽事件 DragEvent 對象

    new DragEvent(type, DragEventInit);

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

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

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

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

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

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

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

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

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

    關(guān)于拖拽事件,有以下幾點注意事項:

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

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

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

    <p ondragover="return false">
    //或
    <p ondragover="event.preventDefault()">
    1. 拖拽事件用一個 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 屬性: 設(shè)置放下(drop)被拖拽節(jié)點時的效果,可能的值包括 copy(復(fù)制被拖拽的節(jié)點), move(移動被拖拽的節(jié)點), link(創(chuàng)建指向被拖拽的節(jié)點的鏈接), none(無法放下被拖拽的節(jié)點)。設(shè)置除此以外的值,都是無效的。

  • effectAllowed 屬性: 設(shè)置本次拖拽中允許的效果,可能的值包括 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è)置事件所帶有的指定類型的數(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種:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • rotationAngle 屬性: 表示觸摸區(qū)域的橢圓的旋轉(zhuǎn)角度,單位為度數(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對象(即相關(guān)的觸摸點)。它包含了代表所有從上一次觸摸事件到此次事件過程中,狀態(tài)發(fā)生了改變的觸點的 Touch 對象。只讀屬性。

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

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

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

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

  • 以下是 IE10+ 中的其他屬性:

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

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

  • pointerType: 取值自 event.MSPOINTER_TYPE_TOUCH, event.MAPOINTER_TYPE_PEN, event.MSPOINTER_TYPE_MOUSE, 表示觸摸設(shè)備;

  • 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相關(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);
    }

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

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

    文檔

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

    瀏覽器中5種常用的事件解析:本篇文章給大家?guī)淼膬?nèi)容是關(guān)于瀏覽器中常用的事件解析,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。表單事件鍵盤事件當 <input>, <textarea> 的值發(fā)生變化時觸發(fā)。此外,打開 contenteditable 屬性的元素,只
    推薦度:
    標簽: 五種 瀏覽器 事件
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top