1、HTML 全局事件屬性 HTML4 的新特性之一就是可以使 HTML 事件觸發瀏覽器中的行為,比方說當用戶點擊某個 HTML 元素時啟動一段 JavaScript,在 HTML5 中還增加了一些新的事件屬性。 HTML 事件就是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 Java
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> 元素時觸發 |