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