HTML事件

91069 閱讀 0 評(píng)論 0 點(diǎn)贊

HTML事件包含Window事件、document事件、Form事件、Keybord事件、Mouse事件和Media事件。

1. window事件

window事件是針對(duì)window對(duì)象觸發(fā)的事件。

語法：window.addEventListener()

屬性	類型	描述	備注
load	Event	頁面結(jié)束加載之后觸發(fā)
resize	Event	當(dāng)瀏覽器窗口被調(diào)整大小時(shí)觸發(fā)	-
error	Event	在錯(cuò)誤發(fā)生時(shí)觸發(fā)	-
copy	ClipboardEvent	文本復(fù)制時(shí)觸發(fā)	元素上可以監(jiān)聽該事件，不過會(huì)冒泡到 window
paste	ClipboardEvent	文本粘貼時(shí)觸發(fā)	元素上可以監(jiān)聽該事件，不過會(huì)冒泡到 window
cut	ClipboardEvent	文本剪切時(shí)觸發(fā)	元素上可以監(jiān)聽該事件，不過會(huì)冒泡到 window
afterprint	Event	文檔打印之后觸發(fā)	-
beforeprint	Event	文檔打印之前觸發(fā)	-
beforunload	Event	文檔卸載之前觸發(fā)	-
error	Event 或者 ErrorEvent	在錯(cuò)誤發(fā)生時(shí)觸發(fā)	-
hashchange	MessageEvent	當(dāng)文檔已改變時(shí)觸發(fā)	-
message	MessageEvent	在消息被觸發(fā)時(shí)觸發(fā)	-
messageerror	MessageEvent	讀取消息異常時(shí)觸發(fā)	-
languagechange	Event	用戶語言設(shè)置改變時(shí)觸發(fā)	-
online	Event	當(dāng)文檔上線時(shí)觸發(fā)	-
offline	Event	當(dāng)文檔離線時(shí)觸發(fā)	-
pagehide	PageTransitionEvent	當(dāng)窗口隱藏時(shí)觸發(fā)	-
pageshow	PageTransitionEvent	當(dāng)窗口成為可見時(shí)觸發(fā)	-
popstate	PopStateEvent	當(dāng)窗口歷史記錄改變時(shí)觸發(fā)	-
storage	StorageEvent	在 Web Storage 區(qū)域更新后觸發(fā)	-
unload	Event	一旦頁面已下載時(shí)觸發(fā)（或者瀏覽器窗口已被關(guān)閉）	-
focus	Event 或者 FocusEvent	元素聚焦時(shí)觸發(fā)	form 相關(guān)元素也可監(jiān)聽，不會(huì)冒泡至 window。不過事件類型為 FocusEvent
blur	Event 或者 FocusEvent	元素失焦時(shí)觸發(fā)	form 相關(guān)元素也可監(jiān)聽，不會(huì)冒泡至 window，不過事件類型為 FocusEvent
unhandledreject	PromiseRejectionEvent	異步錯(cuò)誤未捕獲時(shí)觸發(fā)	-

2. document事件

針對(duì)document對(duì)象觸發(fā)。

語法：document.addEventListener()

屬性	類型	描述	備注
visibilitychange	Event	當(dāng)窗口成為可見時(shí)觸發(fā)	window 也可監(jiān)聽該事件
readystatechange	Event	文檔解析完成且所有的子資源都加載完成觸發(fā)	-
DOMContentLoaded	Event	文檔解析完成觸發(fā)	-

3. form事件

由 html 表單內(nèi)的動(dòng)作觸發(fā)的事件（應(yīng)用到幾乎所有 html 元素，但最常用在 form 元素中）

屬性	類型	描述	備注
formchange	Event	當(dāng)窗口成為可見時(shí)觸發(fā)	window 也可監(jiān)聽該事件
forminput	Event	文檔解析完成且所有的子資源都加載完成觸發(fā)	-
invalid	Event	文檔解析完成觸發(fā)	-
reset	Event	文檔解析完成且所有的子資源都加載完成觸發(fā)
select	Event	文檔解析完成觸發(fā)	-
submit	Event	文檔解析完成且所有的子資源都加載完成觸發(fā)	-
change	Event	文檔解析完成觸發(fā)	-
blur	FocusEvent	元素失焦時(shí)觸發(fā)	window 也可監(jiān)聽該事件
focus	FocusEvent	元素聚焦時(shí)觸發(fā)	window 也可監(jiān)聽該事件

4. keyboard事件

鍵盤輸入觸發(fā)該事件

屬性	類型	描述	備注keydown
keydown	KeyboardEvent	在用戶按下按鍵時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
keyup	KeyboardEvent	當(dāng)用戶釋放按鍵時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
keypress	KeyboardEvent	在用戶敲擊按鈕時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件

5. mouse事件

鼠標(biāo)事件

屬性	類型	描述	備注
click	MouseEvent	元素上發(fā)生鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
dbclick	MouseEvent	元素上發(fā)生鼠標(biāo)雙擊時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
drag	MouseEvent	元素被拖動(dòng)時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
dragend	MouseEvent	在拖動(dòng)操作末端觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
dragenter	MouseEvent	當(dāng)元素元素已被拖動(dòng)到有效拖放區(qū)域時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
dragleave	MouseEvent	當(dāng)元素離開有效拖放目標(biāo)時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
dragover	MouseEvent	當(dāng)元素在有效拖放目標(biāo)上正在被拖動(dòng)時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
dragstart	MouseEvent	在拖動(dòng)操作開端觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
drop	MouseEvent	當(dāng)被拖元素正在被拖放時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
mousedown	MouseEvent	當(dāng)元素上按下鼠標(biāo)按鈕時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
mousemove	MouseEvent	當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
mouseout	MouseEvent	當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)	當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)
mouseover	MouseEvent	當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
mouseup	MouseEvent	當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
mousewheel	MouseEvent	當(dāng)鼠標(biāo)滾輪正在被滾動(dòng)時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件
scroll	MouseEvent	當(dāng)元素滾動(dòng)條被滾動(dòng)時(shí)觸發(fā)	window、document 也可監(jiān)聽該事件, Element 元素可以通過設(shè)置防止冒泡來阻止 window 事件

6. media事件

由媒介（比如視頻、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）

屬性	類型	描述	備注
abort	Event	在退出時(shí)觸發(fā)	-
canplay	Event	當(dāng)文件就緒可以開始播放時(shí)觸發(fā)（緩沖已足夠開始時(shí)）	-
canplaythrough	Event	當(dāng)媒介能夠無需因緩沖而停止即可播放至結(jié)尾時(shí)觸發(fā)	-
durationchange	Event	當(dāng)媒介長度改變時(shí)觸發(fā)	-
emptied	Event	當(dāng)發(fā)生故障并且文件突然不可用時(shí)觸發(fā)（比如連接意外斷開時(shí)）	-
ended	Event	當(dāng)媒介已到達(dá)結(jié)尾時(shí)觸發(fā)（可發(fā)送類似“感謝觀看”之類的消息）	-
error	Event	當(dāng)在文件加載期間發(fā)生錯(cuò)誤時(shí)觸發(fā)	-
loadeddata	Event	當(dāng)媒介數(shù)據(jù)已加載時(shí)觸發(fā)	-
loadedmetadata	Event	當(dāng)元數(shù)據(jù)（比如分辨率和時(shí)長）被加載時(shí)觸發(fā)	-
loadstart	Event	在文件開始加載且未實(shí)際加載任何數(shù)據(jù)前觸發(fā)	-
pause	Event	當(dāng)媒介被用戶或程序暫停時(shí)觸發(fā)	-
play	Event	當(dāng)媒介已就緒可以開始播放時(shí)觸發(fā)	-
playing	Event	當(dāng)媒介已開始播放時(shí)觸發(fā)	-
progress	Event	當(dāng)瀏覽器正在獲取媒介數(shù)據(jù)時(shí)觸發(fā)	-
ratechange	Event	每當(dāng)回放速率改變時(shí)觸發(fā)（比如當(dāng)用戶切換到慢動(dòng)作或快進(jìn)模式）	-
readystatechange	Event	每當(dāng)就緒狀態(tài)改變時(shí)觸發(fā)（就緒狀態(tài)監(jiān)測媒介數(shù)據(jù)的狀態(tài)）	-
seeked	Event	當(dāng) seeking 屬性設(shè)置為 false（指示定位已結(jié)束）時(shí)觸發(fā)	-
seeking	Event	當(dāng) seeking 屬性設(shè)置為 true（指示定位是活動(dòng)的）時(shí)觸發(fā)	-
stalled	Event	在瀏覽器不論何種原因未能取回媒介數(shù)據(jù)時(shí)觸發(fā)	-
suspend	Event	在媒介數(shù)據(jù)完全加載之前不論何種原因終止取回媒介數(shù)據(jù)時(shí)觸發(fā)	-
timeupdate	Event	當(dāng)播放位置改變時(shí)（比如當(dāng)用戶快進(jìn)到媒介中一個(gè)不同的位置時(shí)）觸發(fā)	-
volumechange	Event	每當(dāng)音量改變時(shí)（包括將音量設(shè)置為靜音）時(shí)觸發(fā)	-
waiting	Event	當(dāng)媒介已停止播放但打算繼續(xù)播放時(shí)（比如當(dāng)媒介暫停已緩沖更多數(shù)據(jù)）觸發(fā)	-