溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html中瀏覽器中常用事件有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
當 <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 事件當窗口將要關閉，或者 document 和網頁資源將要卸載時觸發。它可以用來防止用戶不當心關閉網頁。該事件的默認動作就是關閉當前窗口或文檔。如果在監聽函數中，調用了 event.preventDefault()，或者對事件對象的 returnValue 屬性賦予一個非空的值，就會自動跳出一個確認框，讓用戶確認是否關閉網頁。如果用戶點擊“取消”按鈕，網頁就不會關閉。監聽函數所返回的字符串，會顯示在確認對話框之中:
window.addEventListener('beforeunload', function(event) {
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = '你確認要離開嗎？';
}
});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事件: 默認情況下，瀏覽器會在當前會話(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 事件當 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: 事件在文檔或文檔元素滾動時執行腳本
new MouseEvent(typeArg, mouseEventInit);
內置的鼠標事件包括:
mousedown: 按下鼠標
mouseup: 鼠標抬起
click: 點擊
dblclick: 雙擊
mousemove: 鼠標移動
mouseover: 鼠標移入，冒泡
mouseout: 鼠標移出，冒泡
mouseenter: 鼠標移入，不冒泡
mouseleave: 鼠標移出，不冒泡
contextmenu: 右鍵菜單
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表示頁
構造函數 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 屬性
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>加載外部資源的過程，包括下載和上傳。通常包括以下事件:
abort事件: 當進度事件被中止時觸發。如果發生錯誤，導致進程中止，不會觸發該事件。
error事件: 由于錯誤導致資源無法加載時觸發，不會冒泡。error 事件的監聽函數最好放在如 img 元素的 HTML 屬性中。
load事件: 進度成功結束時觸發。
loadstart事件: 進度開始時觸發。
loadend事件: 進度停止時觸發，發生順序排在error事件abort事件load事件后面。loadend事件的監聽函數可以用來取代abort事件/load事件/error事件的監聽函數，loadend事件本身不提供關于進度結束的原因，但可以用它來做所有進度結束場景都需要做的一些操作。
progress事件: 當操作處于進度之中，由傳輸的數據塊不斷觸發。
timeout事件: 進度超過限時觸發
這類事件具有以下屬性:
lengthComputable: 返回一個布爾值，表示當前進度是否具有可計算的長度。如果為false，就表示當前進度無法測量。
total: 返回一個數值，表示當前進度的總長度。如果是通過 HTTP 下載某個資源，表示內容本身的長度，不含 HTTP 頭部的長度。如果 lengthComputable 屬性為 false，則 total 屬性就無法取得正確的值。
loaded: 返回一個數值，表示當前進度已經完成的數量。該屬性除以total屬性，就可以得到目前進度的百分比。
//進度計算
if (e.lengthComputable){
var percentComplete = e.loaded / e.total;
}new DragEvent(type, DragEventInit);
拖拽指的是，用戶在某個對象上按下鼠標鍵不放，拖動它到另一個位置，然后釋放鼠標鍵，將該對象放在那里。拖拽的對象有好幾種，包括 Element 節點, 圖片, 鏈接, 選中的文字等等。在 HTML 網頁中，除了 Element 節點默認不可以拖拽，其他(圖片, 鏈接, 選中的文字)都是可以直接拖拽的。為了讓 Element 節點可拖拽，可以將該節點的 draggable 屬性設為 true。draggable 屬性可用于任何 Element 節點，但是圖片(img 元素)和鏈接(a 元素)不加這個屬性，就可以拖拽。對于它們，用到這個屬性的時候，往往是將其設為 false，防止拖拽。注意，一旦某個 Element 節點的 draggable 屬性設為 true，就無法再用鼠標選中該節點內部的文字或子節點了。
當Element節點或選中的文本被拖拽時，就會持續觸發拖拽事件，包括以下一些事件:
drag事件: 拖拽過程中，在被拖拽的節點上持續觸發。
dragstart事件: 拖拽開始時在被拖拽的節點上觸發，該事件的target屬性是被拖拽的節點。通常應該在這個事件的監聽函數中，指定拖拽的數據。
dragend事件: 拖拽結束時(釋放鼠標鍵或按下escape鍵)在被拖拽的節點上觸發，該事件的target屬性是被拖拽的節點。它與dragStart事件，在同一個節點上觸發。不管拖拽是否跨窗口，或者中途被取消，dragend事件總是會觸發的。
dragenter事件: 拖拽進入當前節點時，在當前節點上觸發，該事件的target屬性是當前節點。通常應該在這個事件的監聽函數中，指定是否允許在當前節點放下(drop)拖拽的數據。如果當前節點沒有該事件的監聽函數，或者監聽函數不執行任何操作，就意味著不允許在當前節點放下數據。在視覺上顯示拖拽進入當前節點，也是在這個事件的監聽函數中設置。
dragover事件: 拖拽到當前節點上方時，在當前節點上持續觸發，該事件的target屬性是當前節點。該事件與dragenter事件基本類似，默認會重置當前的拖拽事件的效果(DataTransfer對象的dropEffect屬性)為none，即不允許放下被拖拽的節點，所以如果允許在當前節點drop數據，通常會使用preventDefault方法，取消重置拖拽效果為none。
dragleave事件: 拖拽離開當前節點范圍時，在當前節點上觸發，該事件的target屬性是當前節點。在視覺上顯示拖拽離開當前節點，就在這個事件的監聽函數中設置。
drop事件: 被拖拽的節點或選中的文本，釋放到目標節點時，在目標節點上觸發。注意，如果當前節點不允許drop，即使在該節點上方松開鼠標鍵，也不會觸發該事件。如果用戶按下Escape鍵，取消這個操作，也不會觸發該事件。該事件的監聽函數負責取出拖拽數據，并進行相關處理。
關于拖拽事件，有以下幾點注意事項:
拖拽過程只觸發以上這些拖拽事件，盡管鼠標在移動，但是鼠標事件不會觸發。
將文件從操作系統拖拽進瀏覽器，不會觸發 dragStart 和 dragend 事件。
dragenter 和 dragover 事件的監聽函數，用來指定可以放下(drop)拖拽的數據。由于網頁的大部分區域不適合作為 drop 的目標節點，所以這兩個事件的默認設置為當前節點不允許 drop。如果想要在目標節點上 drop 拖拽的數據，首先必須阻止這兩個事件的默認行為，或者取消這兩個事件。
<p ondragover="return false"> //或 <p ondragover="event.preventDefault()">
拖拽事件用一個 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 方法添加的數據)。如果指定類型的數據不存在，則返回空字符串。
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種:
touchstart: 用戶接觸觸摸屏時觸發，它的 target 屬性返回發生觸摸的 Element 節點(IE10+中使用 mspointerdown 事件);
touchend: 用戶不再接觸觸摸屏時(或者移出屏幕邊緣時)觸發，它的 target 屬性與 touchstart 事件的 target 屬性是一致的，它的 changedTouches 屬性返回一個TouchList對象，包含所有不再觸摸的觸摸點(Touch對象)(IE10+中使用 mspointerup 事件);
touchmove: 用戶移動觸摸點時觸發，它的 target 屬性與 touchstart 事件的 target 屬性一致。如果觸摸的半徑, 角度, 力度發生變化，也會觸發該事件。(IE10+中使用 mspointermove 事件);
touchenter: 當觸點進入某個 element 時觸發。此事件沒有冒泡過程。(IE10+中使用 mspointerover 事件);
touchleave: 當觸點離開某個 element 時觸發。此事件沒有冒泡過程。(IE10+中使用 mspointerout 事件);
touchcancel: 當觸點由于某些原因被中斷時觸發。有幾種可能的原因如下(具體的原因根據不同的設備和瀏覽器有所不同):(IE10+中沒有對應事件);
由于某個事件取消了觸摸: 例如觸摸過程被一個模態的彈出框或電話打斷;
觸點離開了文檔窗口，而進入了瀏覽器的界面元素, 插件或者其他外部內容區域;
當用戶產生的觸點個數超過了設備支持的個數，從而導致 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相關事件如下：
//以下代碼并未兼容低版本 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);
}當然本文僅僅列舉了一些常用事件，其實事件還有很多，本文會在必要的時候繼續更新，但即便如此也不可能窮盡所有的事件，比如還有動畫事件: animationstart, animation, animationend 等等。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“html中瀏覽器中常用事件有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
