HTML 事件

一、HTML 全局事件屬性

  HTML4 的新特性之一就是可使 HTML 事件觸發瀏覽器中的行爲,比方說當用戶點擊某個 HTML 元素時啓動一段 JavaScript,在 HTML5 中還增長了一些新的事件屬性。瀏覽器

  HTML 事件就是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時, JavaScript 就能夠觸發這些事件。HTML 事件能夠是瀏覽器行爲,也能夠是用戶行爲。瀏覽器行爲好比:頁面加載時觸發事件,頁面關閉時觸發事件等等。用戶行爲好比:點擊按鈕觸發事件,改變窗口大小觸發事件等等。一般,在事件觸發時 JavaScript 能夠執行一些代碼,HTML 元素中能夠添加事件屬性,使用 JavaScript 代碼來添加 HTML 元素。HTML 事件屬性能夠直接執行 JavaScript 代碼,HTML 事件屬性能夠調用 JavaScript 函數,但一般都是使用 JavaScript 代碼來爲 HTML 元素綁定事件處理程序。JavaScript 經過事件能夠用於處理表單驗證,用戶輸入,用戶行爲及瀏覽器動做。網絡

  下面的表格提供了標準的事件屬性,能夠把它們綁定在 HTML 元素上,以定義事件行爲。ide

 

二、窗口事件屬性

  由窗口觸發該事件,適用於 <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) 在頁面打印以後運行腳本

 

三、表單事件屬性

  表單事件在 HTML 表單中觸發 ,適用於全部 HTML 元素, 但該 HTML 元素需在 form 表單內:spa

事件屬性 說明
onselect 當選取元素時運行腳本
onchange 當元素改變時運行腳本
onsubmit 當提交表單時運行腳本
onfocus 當元素得到焦點時運行腳本
onblur 當元素失去焦點時運行腳本
onforminput  (H5) 當表單得到用戶輸入時運行腳本
oninput    (H5) 當元素得到用戶輸入時運行腳本
onformchange  (H5) 當表單改變時運行腳本
oncontextmenu  (H5) 當觸發上下文菜單時運行腳本
oninvalid     (H5) 當元素無效時運行腳本

 

四、多媒體事件屬性

  經過圖像(image),音頻(audio) 或者 視頻(video) 觸發該事件,多應用於 HTML 媒體元素好比 <img>,<audio>,<video>,<embed> 和 <object>,多媒體元素除了 <img> 和 <object> 以外,其他都是 HTML5 新增長的元素,因此多媒體事件屬性也都爲新增長的:orm

事件屬性 說明
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) 當媒介元素的定位屬性爲真且定位已開始時運行腳本

 

五、鼠標事件屬性

  經過鼠標觸發事件, 模擬用戶的行爲:視頻

事件屬性 說明
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) 當元素離開有效拖放目標時運行腳本

 

六、鍵盤事件屬性

  經過鍵盤按鍵觸發事件,模擬用戶的行爲:seo

事件屬性 說明
onkeydown 當按下按鍵時運行腳本
onkeyup 當鬆開按鍵時運行腳本
onkeypress 當按下並鬆開按鍵時運行腳本

 

七、其餘事件屬性

事件屬性 說明
onshow  (H5) 當 <menu> 元素在上下文顯示時觸發
ontoggle  (H5) 當用戶打開或關閉 <details> 元素時觸發
相關文章
相關標籤/搜索