整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
得收藏的HTML DOM事件和鼠標(biāo)鍵盤事件
onabort//圖像的加載被中斷。
onblur//元素失去焦點(diǎn)。
onchange//域的內(nèi)容被改變。
onclick//當(dāng)用戶點(diǎn)擊某個(gè)對象時(shí)調(diào)用的事件句柄。
ondblclick//當(dāng)用戶雙擊某個(gè)對象時(shí)調(diào)用的事件句柄。
onerror//在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。
onfocus//元素獲得焦點(diǎn)。
onkeydown//某個(gè)鍵盤按鍵被按下。
onkeypress//某個(gè)鍵盤按鍵被按下并松開。
onkeyup//某個(gè)鍵盤按鍵被松開。
onload//一張頁面或一幅圖像完成加載。
onmousedown//鼠標(biāo)按鈕被按下。
onmousemove//鼠標(biāo)被移動(dòng)。
onmouseout//鼠標(biāo)從某元素移開。
onmouseover//鼠標(biāo)移到某元素之上。
onmouseup//鼠標(biāo)按鍵被松開。
onreset//重置按鈕被點(diǎn)擊。
onresize//窗口或框架被重新調(diào)整大小。
onselect//文本被選中。
onsubmit//確認(rèn)按鈕被點(diǎn)擊。
onunload//用戶退出頁面。
值得收藏的HTML DOM事件和鼠標(biāo)鍵盤事件
altKey//返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。
button//返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
clientX//返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
clientY//返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
ctrlKey//返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。
metaKey//返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。
relatedTarget//返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。
screenX//返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
screenY//返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
shiftKey//返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。
值得收藏的HTML DOM事件和鼠標(biāo)鍵盤事件
以上內(nèi)容為互聯(lián)網(wǎng)收集感謝關(guān)注與收藏
HTML DOM 事件
HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。
事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！ (如用戶點(diǎn)擊按鈕)。
提示： 在 W3C 2 級(jí) DOM 事件中規(guī)范了事件模型。
HTML DOM 事件
DOM： 指明使用的 DOM 屬性級(jí)別。
鼠標(biāo)事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onclick | 當(dāng)用戶點(diǎn)擊某個(gè)對象時(shí)調(diào)用的事件句柄。 | 2 |
| oncontextmenu | 在用戶點(diǎn)擊鼠標(biāo)右鍵打開上下文菜單時(shí)觸發(fā) | |
| ondblclick | 當(dāng)用戶雙擊某個(gè)對象時(shí)調(diào)用的事件句柄。 | 2 |
| onmousedown | 鼠標(biāo)按鈕被按下。 | 2 |
| onmouseenter | 當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)。 | 2 |
| onmouseleave | 當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā) | 2 |
| onmousemove | 鼠標(biāo)被移動(dòng)。 | 2 |
| onmouseover | 鼠標(biāo)移到某元素之上。 | 2 |
| onmouseout | 鼠標(biāo)從某元素移開。 | 2 |
| onmouseup | 鼠標(biāo)按鍵被松開。 | 2 |
鍵盤事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onkeydown | 某個(gè)鍵盤按鍵被按下。 | 2 |
| onkeypress | 某個(gè)鍵盤按鍵被按下并松開。 | 2 |
| onkeyup | 某個(gè)鍵盤按鍵被松開。 | 2 |
框架/對象（Frame/Object）事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onabort | 圖像的加載被中斷。 ( <object>) | 2 |
| onbeforeunload | 該事件在即將離開頁面（刷新或關(guān)閉）時(shí)觸發(fā) | 2 |
| onerror | 在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。 ( <object>, <body>和 <frameset>) | |
| onhashchange | 該事件在當(dāng)前 URL 的錨部分發(fā)生修改時(shí)觸發(fā)。 | |
| onload | 一張頁面或一幅圖像完成加載。 | 2 |
| onpageshow | 該事件在用戶訪問頁面時(shí)觸發(fā) | |
| onpagehide | 該事件在用戶離開當(dāng)前網(wǎng)頁跳轉(zhuǎn)到另外一個(gè)頁面時(shí)觸發(fā) | |
| onresize | 窗口或框架被重新調(diào)整大小。 | 2 |
| onscroll | 當(dāng)文檔被滾動(dòng)時(shí)發(fā)生的事件。 | 2 |
| onunload | 用戶退出頁面。 ( <body> 和 <frameset>) | 2 |
表單事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onblur | 元素失去焦點(diǎn)時(shí)觸發(fā) | 2 |
| onchange | 該事件在表單元素的內(nèi)容改變時(shí)觸發(fā)( <input>, <keygen>, <select>, 和 <textarea>) | 2 |
| onfocus | 元素獲取焦點(diǎn)時(shí)觸發(fā) | 2 |
| onfocusin | 元素即將獲取焦點(diǎn)時(shí)觸發(fā) | 2 |
| onfocusout | 元素即將失去焦點(diǎn)時(shí)觸發(fā) | 2 |
| oninput | 元素獲取用戶輸入時(shí)觸發(fā) | 3 |
| onreset | 表單重置時(shí)觸發(fā) | 2 |
| onsearch | 用戶向搜索域輸入文本時(shí)觸發(fā) ( <input="search">) | |
| onselect | 用戶選取文本時(shí)觸發(fā) ( <input> 和 <textarea>) | 2 |
| onsubmit | 表單提交時(shí)觸發(fā) | 2 |
剪貼板事件
| 屬性 | 描述 | DOM |
|---|---|---|
| oncopy | 該事件在用戶拷貝元素內(nèi)容時(shí)觸發(fā) | |
| oncut | 該事件在用戶剪切元素內(nèi)容時(shí)觸發(fā) | |
| onpaste | 該事件在用戶粘貼元素內(nèi)容時(shí)觸發(fā) |
打印事件
| 屬性 | 描述 | DOM |
|---|---|---|
| onafterprint | 該事件在頁面已經(jīng)開始打印，或者打印窗口已經(jīng)關(guān)閉時(shí)觸發(fā) | |
| onbeforeprint | 該事件在頁面即將開始打印時(shí)觸發(fā) |
拖動(dòng)事件
| 事件 | 描述 | DOM |
|---|---|---|
| ondrag | 該事件在元素正在拖動(dòng)時(shí)觸發(fā) | |
| ondragend | 該事件在用戶完成元素的拖動(dòng)時(shí)觸發(fā) | |
| ondragenter | 該事件在拖動(dòng)的元素進(jìn)入放置目標(biāo)時(shí)觸發(fā) | |
| ondragleave | 該事件在拖動(dòng)元素離開放置目標(biāo)時(shí)觸發(fā) | |
| ondragover | 該事件在拖動(dòng)元素在放置目標(biāo)上時(shí)觸發(fā) | |
| ondragstart | 該事件在用戶開始拖動(dòng)元素時(shí)觸發(fā) | |
| ondrop | 該事件在拖動(dòng)元素放置在目標(biāo)區(qū)域時(shí)觸發(fā) |
多媒體（Media）事件
| 事件 | 描述 | DOM |
|---|---|---|
| onabort | 事件在視頻/音頻（audio/video）終止加載時(shí)觸發(fā)。 | |
| oncanplay | 事件在用戶可以開始播放視頻/音頻（audio/video）時(shí)觸發(fā)。 | |
| oncanplaythrough | 事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩沖時(shí)觸發(fā)。 | |
| ondurationchange | 事件在視頻/音頻（audio/video）的時(shí)長發(fā)生變化時(shí)觸發(fā)。 | |
| onemptied | 當(dāng)期播放列表為空時(shí)觸發(fā) | |
| onended | 事件在視頻/音頻（audio/video）播放結(jié)束時(shí)觸發(fā)。 | |
| onerror | 事件在視頻/音頻（audio/video）數(shù)據(jù)加載期間發(fā)生錯(cuò)誤時(shí)觸發(fā)。 | |
| onloadeddata | 事件在瀏覽器加載視頻/音頻（audio/video）當(dāng)前幀時(shí)觸發(fā)觸發(fā)。 | |
| onloadedmetadata | 事件在指定視頻/音頻（audio/video）的元數(shù)據(jù)加載后觸發(fā)。 | |
| onloadstart | 事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發(fā)。 | |
| onpause | 事件在視頻/音頻（audio/video）暫停時(shí)觸發(fā)。 | |
| onplay | 事件在視頻/音頻（audio/video）開始播放時(shí)觸發(fā)。 | |
| onplaying | 事件在視頻/音頻（audio/video）暫停或者在緩沖后準(zhǔn)備重新開始播放時(shí)觸發(fā)。 | |
| onprogress | 事件在瀏覽器下載指定的視頻/音頻（audio/video）時(shí)觸發(fā)。 | |
| onratechange | 事件在視頻/音頻（audio/video）的播放速度發(fā)送改變時(shí)觸發(fā)。 | |
| onseeked | 事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發(fā)。 | |
| onseeking | 事件在用戶開始重新定位視頻/音頻（audio/video）時(shí)觸發(fā)。 | |
| onstalled | 事件在瀏覽器獲取媒體數(shù)據(jù)，但媒體數(shù)據(jù)不可用時(shí)觸發(fā)。 | |
| onsuspend | 事件在瀏覽器讀取媒體數(shù)據(jù)中止時(shí)觸發(fā)。 | |
| ontimeupdate | 事件在當(dāng)前的播放位置發(fā)送改變時(shí)觸發(fā)。 | |
| onvolumechange | 事件在音量發(fā)生改變時(shí)觸發(fā)。 | |
| onwaiting | 事件在視頻由于要播放下一幀而需要緩沖時(shí)觸發(fā)。 |
動(dòng)畫事件
| 事件 | 描述 | DOM |
|---|---|---|
| animationend | 該事件在 CSS 動(dòng)畫結(jié)束播放時(shí)觸發(fā) | |
| animationiteration | 該事件在 CSS 動(dòng)畫重復(fù)播放時(shí)觸發(fā) | |
| animationstart | 該事件在 CSS 動(dòng)畫開始播放時(shí)觸發(fā) |
過渡事件
| 事件 | 描述 | DOM |
|---|---|---|
| transitionend | 該事件在 CSS 完成過渡后觸發(fā)。 |
其他事件
| 事件 | 描述 | DOM |
|---|---|---|
| onmessage | 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時(shí)觸發(fā) | |
| onmousewheel | 已廢棄。 使用 onwheel 事件替代 | |
| ononline | 該事件在瀏覽器開始在線工作時(shí)觸發(fā)。 | |
| onoffline | 該事件在瀏覽器開始離線工作時(shí)觸發(fā)。 | |
| onpopstate | 該事件在窗口的瀏覽歷史（history 對象）發(fā)生改變時(shí)觸發(fā)。 | |
| onshow | 該事件當(dāng) <menu> 元素在上下文菜單顯示時(shí)觸發(fā) | |
| onstorage | 該事件在 Web Storage(HTML 5 Web 存儲(chǔ))更新時(shí)觸發(fā) | |
| ontoggle | 該事件在用戶打開或關(guān)閉 <details> 元素時(shí)觸發(fā) | |
| onwheel | 該事件在鼠標(biāo)滾輪在元素上下滾動(dòng)時(shí)觸發(fā) |
事件對象
常量
| 靜態(tài)變量 | 描述 | DOM |
|---|---|---|
| CAPTURING-PHASE | 當(dāng)前事件階段為捕獲階段(3) | 1 |
| AT-TARGET | 當(dāng)前事件是目標(biāo)階段,在評(píng)估目標(biāo)事件(1) | 2 |
| BUBBLING-PHASE | 當(dāng)前的事件為冒泡階段 (2) | 3 |
屬性
| 屬性 | 描述 | DOM |
|---|---|---|
| bubbles | 返回布爾值，指示事件是否是起泡事件類型。 | 2 |
| cancelable | 返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。 | 2 |
| currentTarget | 返回其事件監(jiān)聽器觸發(fā)該事件的元素。 | 2 |
| eventPhase | 返回事件傳播的當(dāng)前階段。 | 2 |
| target | 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。 | 2 |
| timeStamp | 返回事件生成的日期和時(shí)間。 | 2 |
| type | 返回當(dāng)前 Event 對象表示的事件的名稱。 | 2 |
方法
| 方法 | 描述 | DOM |
|---|---|---|
| initEvent() | 初始化新創(chuàng)建的 Event 對象的屬性。 | 2 |
| preventDefault() | 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作。 | 2 |
| stopPropagation() | 不再派發(fā)事件。 | 2 |
目標(biāo)事件對象
方法
| 方法 | 描述 | DOM |
|---|---|---|
| addEventListener() | 允許在目標(biāo)事件中注冊監(jiān)聽事件(IE8 = attachEvent()) | 2 |
| dispatchEvent() | 允許發(fā)送事件到監(jiān)聽器上 (IE8 = fireEvent()) | 2 |
| removeEventListener() | 運(yùn)行一次注冊在事件目標(biāo)上的監(jiān)聽事件(IE8 = detachEvent()) | 2 |
事件監(jiān)聽對象
方法
| 方法 | 描述 | DOM |
|---|---|---|
| handleEvent() | 把任意對象注冊為事件處理程序 | 2 |
文檔事件對象
方法
| 方法 | 描述 | DOM |
|---|---|---|
| createEvent() | 2 |
鼠標(biāo)/鍵盤事件對象
屬性
| 屬性 | 描述 | DOM |
|---|---|---|
| altKey | 返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。 | 2 |
| button | 返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。 | 2 |
| clientX | 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。 | 2 |
| clientY | 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。 | 2 |
| ctrlKey | 返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。 | 2 |
| Location | 返回按鍵在設(shè)備上的位置 | 3 |
| charCode | 返回onkeypress事件觸發(fā)鍵值的字母代碼。 | 2 |
| key | 在按下按鍵時(shí)返回按鍵的標(biāo)識(shí)符。 | 3 |
| keyCode | 返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。 | 2 |
| which | 返回onkeypress事件觸發(fā)的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。 | 2 |
| metaKey | 返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。 | 2 |
| relatedTarget | 返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。 | 2 |
| screenX | 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。 | 2 |
| screenY | 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。 | 2 |
| shiftKey | 返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。 | 2 |
方法
| 方法 | 描述 | W3C |
|---|---|---|
| initMouseEvent() | 初始化鼠標(biāo)事件對象的值 | 2 |
| initKeyboardEvent() | 初始化鍵盤事件對象的值 | 3 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
OM事件是Web開發(fā)中的一個(gè)核心概念，它允許JavaScript響應(yīng)用戶與網(wǎng)頁交互的各種行為。DOM（文檔對象模型）是一個(gè)跨平臺(tái)和語言獨(dú)立的接口，它讓程序能夠動(dòng)態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。DOM事件是這個(gè)模型中的一個(gè)關(guān)鍵組成部分，它提供了一種機(jī)制來捕捉和響應(yīng)用戶的行為，如點(diǎn)擊、滾動(dòng)、按鍵等。
DOM事件遵循一個(gè)稱為“事件流”的過程，該過程定義了從頁面中接收事件的順序。這個(gè)流程可以分為三個(gè)階段：
開發(fā)者可以選擇在捕獲階段或冒泡階段添加事件監(jiān)聽器，從而控制事件的處理時(shí)機(jī)。
為了響應(yīng)事件，開發(fā)者需要在DOM元素上注冊事件監(jiān)聽器（也稱為事件處理程序）。這通常通過addEventListener方法實(shí)現(xiàn)。例如，以下代碼在一個(gè)按鈕元素上添加了一個(gè)點(diǎn)擊事件監(jiān)聽器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Click Example</title>
</head>
<body>
<!-- 創(chuàng)建一個(gè)按鈕 -->
<button id="myButton">點(diǎn)擊我</button>
<!-- 引入JavaScript來處理點(diǎn)擊事件 -->
<script>
// 獲取按鈕元素
const button = document.getElementById('myButton');
// 為按鈕添加點(diǎn)擊事件監(jiān)聽器
button.addEventListener('click', function(event) {
// 當(dāng)按鈕被點(diǎn)擊時(shí)，顯示一個(gè)警告框
alert('按鈕被點(diǎn)擊了！');
});
</script>
</body>
</html>
當(dāng)用戶點(diǎn)擊該按鈕時(shí)，會(huì)彈出一個(gè)警告框。
當(dāng)事件發(fā)生時(shí)，瀏覽器會(huì)創(chuàng)建一個(gè)事件對象，這個(gè)對象包含了與事件相關(guān)的所有信息，如觸發(fā)事件的元素、事件類型、發(fā)生時(shí)間等。事件對象會(huì)作為參數(shù)傳遞給事件處理函數(shù)，允許開發(fā)者在函數(shù)內(nèi)部訪問這些信息。
button.addEventListener('click', function(event) {
console.log(event.target); // 輸出觸發(fā)事件的元素
});
DOM事件有很多種類型，以下是一些常見的事件類型：
事件委托是一種常用的事件處理模式，它利用了DOM事件的冒泡原理。開發(fā)者可以在父元素上設(shè)置一個(gè)事件監(jiān)聽器來管理所有子元素的相同事件。這種方式可以提高性能，減少內(nèi)存使用，并簡化事件管理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Item Click Example</title>
</head>
<body>
<!-- 創(chuàng)建一個(gè)無序列表 -->
<ul id="myList">
<li>列表項(xiàng) 1</li>
<li>列表項(xiàng) 2</li>
<li>列表項(xiàng) 3</li>
<li>列表項(xiàng) 4</li>
</ul>
<!-- 引入JavaScript來處理點(diǎn)擊事件 -->
<script>
// 為整個(gè)列表添加點(diǎn)擊事件監(jiān)聽器
document.getElementById('myList').addEventListener('click', function(event) {
// 檢查被點(diǎn)擊的元素是否是列表項(xiàng)
if (event.target.tagName === 'LI') {
// 如果是列表項(xiàng)，顯示一個(gè)警告框
alert('列表項(xiàng)被點(diǎn)擊！');
}
});
</script>
</body>
</html>
在這個(gè)例子中，點(diǎn)擊任何列表項(xiàng)都會(huì)觸發(fā)事件處理函數(shù)，盡管監(jiān)聽器是在它們的父元素上注冊的。
DOM事件是與用戶交互不可或缺的一部分，它們使得前端開發(fā)者能夠創(chuàng)建動(dòng)態(tài)和響應(yīng)式的網(wǎng)頁。理解事件的工作原理以及如何有效地使用它們是每個(gè)前端開發(fā)者必備的技能。隨著技術(shù)的不斷進(jìn)步，DOM事件的API和模型也在不斷演變，但其基本原理和實(shí)踐仍然是構(gòu)建現(xiàn)代Web應(yīng)用的基石。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
