首頁 > 開發者 > JavaScript
HTML 事件，html事件
1、HTML 全域事件屬性
HTML4 的新特性之一就是可以使 HTML 事件觸發瀏覽器中的行為，比方說當使用者點擊某個 HTML 元素時啟動一段 JavaScript，在 HTML5 中還增加了一些新的事件屬性。
HTML 事件就是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 就可以觸發這些事件。HTML 事件可以是瀏覽器行為，也可以是使用者行為。瀏覽器行為比如：頁面載入時觸發事件，頁面關閉時觸發事件等等。使用者行為比如：點擊按鈕觸發事件，改變視窗大小觸發事件等等。通常，在事件觸發時 JavaScript 可以執行一些代碼，HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。HTML 事件屬性可以直接執行 JavaScript 代碼，HTML 事件屬性可以調用 JavaScript 函數，但通常都是使用 JavaScript 代碼來為 HTML 元素繫結事件處理常式。JavaScript 通過事件可以用於處理表單驗證，使用者輸入，使用者行為及瀏覽器動作。
下面的表格提供了標準的事件屬性，可以把它們綁定在 HTML 元素上，以定義事件行為。
2、視窗事件屬性
由視窗觸發該事件，適用於 <body> 標籤：
| 事件屬性 | 說明 |
| onload | 當頁面載入完成時運行指令碼 |
| onfocus | 當視窗獲得焦點時運行指令碼 |
| onblur | 當視窗失去焦點時運行指令碼 |
| onbeforeonload (H5) | 在頁面載入之前運行指令碼 |
| onunload (H5) | 當使用者離開文檔時運行指令碼 |
| onerror (H5) | 當錯誤發生時運行指令碼 |
| ononline (H5) | 當文檔上線時運行指令碼 |
| onoffline (H5) | 當文檔離線時運行指令碼 |
| onhaschange (H5) | 當文檔改變時運行指令碼 |
| onundo (H5) | 當文檔執行撤銷時運行指令碼 |
| onmessage (H5) | 當觸發訊息時運行指令碼 |
| onresize (H5) | 當調整視窗大小時運行指令碼 |
| onpageshow (H5) | 當視窗可見時運行指令碼 |
| onpagehide (H5) | 當視窗隱藏時運行指令碼 |
| onpopstate (H5) | 當視窗記錄改變時運行指令碼 |
| onredo (H5) | 當文檔執行再執行操作時運行指令碼 |
| onstorage (H5) | 當 Web Storage(網路儲存) 地區更新時（儲存空間中的資料發生變化時）運行指令碼 |
| onbeforeprint (H5) | 在頁面列印之前運行指令碼 |
| onafterprint (H5) | 在頁面列印之後運行指令碼 |
3、表單事件屬性
表單事件在 HTML 表單中觸發 ，適用於所有 HTML 元素, 但該 HTML 元素需在 form 表單內：
| 事件屬性 | 說明 |
| onselect | 當選取元素時運行指令碼 |
| onchange | 當元素改變時運行指令碼 |
| onsubmit | 當提交表單時運行指令碼 |
| onfocus | 當元素獲得焦點時運行指令碼 |
| onblur | 當元素失去焦點時運行指令碼 |
| onforminput (H5) | 當表單獲得使用者輸入時運行指令碼 |
| oninput (H5) | 當元素獲得使用者輸入時運行指令碼 |
| onformchange (H5) | 當表單改變時運行指令碼 |
| oncontextmenu (H5) | 當觸發操作功能表時運行指令碼 |
| oninvalid (H5) | 當元素無效時運行指令碼 |
4、多媒體事件屬性
通過映像(image)，音頻(audio) 或者 視頻(video) 觸發該事件，多應用於 HTML 媒體元素比如 <img>，<audio>，<video>，<embed> 和 <object>，多媒體元素除了 <img> 和 <object> 之外，其餘都是 HTML5 新增加的元素，所以多媒體事件屬性也都為新增加的：
| 事件屬性 | 說明 |
| onabort | 當發生中止事件時運行指令碼 |
| onprogress (H5) | 當瀏覽器正在取媒介資料時運行指令碼 |
| onloadstart (H5) | 當瀏覽器開始載入媒介資料時運行指令碼 |
| onerror (H5) | 當在元素載入期間發生錯誤時運行指令碼 |
| onloadeddata (H5) | 當載入媒介資料時運行指令碼 |
| onreadystatechange (H5) | 當就緒狀態(ready-state)改變時運行指令碼 |
| onplay (H5) | 當媒介資料將要開始播放時運行指令碼 |
| onplaying (H5) | 當媒介資料已開始播放時運行指令碼 |
| onpause (H5) | 當媒介資料暫停時運行指令碼 |
| onvolumechange (H5) | 當媒介改變音量亦或當音量被設定為靜音時運行指令碼 |
| onended (H5) | 當媒介已抵達結尾時運行指令碼 |
| oncanplay (H5) | 當媒介能夠開始播放但可能因緩衝而需要停止時運行指令碼 |
| oncanplaythrough (H5) | 當媒介能夠無需因緩衝而停止即可播放至結尾時運行指令碼 |
| ontimeupdate (H5) | 當媒介改變其播放位置時運行指令碼 |
| onwaiting (H5) | 當媒介已停止播放但打算繼續播放時運行指令碼 |
| ondurationchange (H5) | 當媒介長度改變時運行指令碼 |
| onratechange (H5) | 當媒介資料的播放速率改變時運行指令碼 |
| onemptied (H5) | 當媒介資源元素突然為空白時（網路錯誤、載入錯誤等）運行指令碼 |
| onloadedmetadata (H5) | 當媒介元素的期間以及其他媒介資料已載入時運行指令碼 |
| onstalled (H5) | 當取回媒介資料過程中（延遲）存在錯誤時運行指令碼 |
| onsuspend (H5) | 當瀏覽器已在取媒介資料但在取回整個媒介檔案之前停止時運行指令碼 |
| onseeked (H5) | 當媒介元素的定位屬性不再為真且定位已結束時運行指令碼 |
| onseeking (H5) | 當媒介元素的定位屬性為真且定位已開始時運行指令碼 |
5、滑鼠事件屬性
通過滑鼠觸發事件, 類比使用者的行為：
| 事件屬性 | 說明 |
| onclick | 當單擊滑鼠時運行指令碼 |
| ondblclick | 當雙擊滑鼠時運行指令碼 |
| onmouseover | 當滑鼠移入元素時運行指令碼 |
| onmouseout | 當滑鼠移出元素時運行指令碼 |
| onmousemove | 當滑鼠移動時運行指令碼 |
| onmousedown | 當按下滑鼠按鍵時運行指令碼 |
| onmouseup | 當鬆開滑鼠按鍵時運行指令碼 |
| onmousewheel (H5) | 當轉動滑鼠滾輪時運行指令碼 |
| onscroll (H5) | 當滾動元素的捲軸時運行指令碼 |
| ondrag (H5) | 當拖動元素時運行指令碼 |
| ondragstart (H5) | 當拖動操作開始時運行指令碼 |
| ondragend (H5) | 當拖動操作結束時運行指令碼 |
| ondrop (H5) | 當被拖動元素正在被拖放時運行指令碼 |
| ondragover (H5) | 當元素被拖動至有效拖放目標上方時運行指令碼 |
| ondragenter (H5) | 當元素被拖動至有效拖放目標時運行指令碼 |
| ondragleave (H5) | 當元素離開有效拖放目標時運行指令碼 |
6、鍵盤事件屬性
通過鍵盤按鍵觸發事件，類比使用者的行為：
| 事件屬性 | 說明 |
| onkeydown | 當按下按鍵時運行指令碼 |
| onkeyup | 當鬆開按鍵時運行指令碼 |
| onkeypress | 當按下並鬆開按鍵時運行指令碼 |
7、其他事件屬性
| 事件屬性 | 說明 |
| onshow (H5) | 當 <menu> 元素在上下文顯示時觸發 |
| ontoggle (H5) | 當使用者開啟或關閉 <details> 元素時觸發 |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
