HTML 事件屬性
全局事件屬性
HTML 4 的新特性之一是可以使 HTML 事件觸發瀏覽器中的行爲,比方說當用戶點擊某個 HTML 元素時啓動一段 JavaScript。
如果你想學習更多關於事件屬性,請訪問 JavaScript 教程
下面的表格提供了標準的事件屬性,可以把它們插入 HTML/XHTML 元素中,以定義事件行爲。
New : HTML5新增屬性事件。
窗口事件屬性(Window Event Attributes)
由窗口觸發該事件 (適用於 標籤):
屬性 | 值 | 描述 |
---|---|---|
onafterprintNew | script | 在打印文檔之後運行腳本 |
onbeforeprintNew | script | 在文檔打印之前運行腳本 |
onbeforeonloadNew | script | 在文檔加載之前運行腳本 |
onblur | script | 當窗口失去焦點時運行腳本 |
onerrorNew | script | 當錯誤發生時運行腳本 |
onfocus | script | 當窗口獲得焦點時運行腳本 |
onhaschangeNew | script | 當文檔改變時運行腳本 |
onload | script | 當文檔加載時運行腳本 |
onmessageNew | script | 當觸發消息時運行腳本 |
onofflineNew | script | 當文檔離線時運行腳本 |
ononlineNew | script | 當文檔上線時運行腳本 |
onpagehideNew | script | 當窗口隱藏時運行腳本 |
onpageshowNew | script | 當窗口可見時運行腳本 |
onpopstateNew | script | 當窗口歷史記錄改變時運行腳本 |
onredoNew | script | 當文檔執行再執行操作(redo)時運行腳本 |
onresizeNew | script | 當調整窗口大小時運行腳本 |
onstorageNew | script | 當 Web Storage 區域更新時(存儲空間中的數據發生變化時)運行腳本 |
onundoNew | script | 當文檔執行撤銷時運行腳本 |
onunloadNew | script | 當用戶離開文檔時運行腳本 |
表單事件(Form Events)
表單事件在HTML表單中觸發 (適用於所有 HTML 元素, 但該HTML元素需在form表單內):
屬性 | 值 | 描述 |
---|---|---|
onblur | script | 當元素失去焦點時運行腳本 |
onchange | script | 當元素改變時運行腳本 |
oncontextmenuNew | script | 當觸發上下文菜單時運行腳本 |
onfocus | script | 當元素獲得焦點時運行腳本 |
onformchangeNew | script | 當表單改變時運行腳本 |
onforminputNew | script | 當表單獲得用戶輸入時運行腳本 |
oninputNew | script | 當元素獲得用戶輸入時運行腳本 |
oninvalidNew | script | 當元素無效時運行腳本 |
onreset | script | 當表單重置時運行腳本。HTML 5 不支持。 |
onselect | script | 當選取元素時運行腳本 |
onsubmit | script | 當提交表單時運行腳本 |
鍵盤事件(Keyboard Events)
屬性 | 值 | 描述 |
---|---|---|
onkeydown | script | 當按下按鍵時運行腳本 |
onkeypress | script | 當按下並鬆開按鍵時運行腳本 |
onkeyup | script | 當鬆開按鍵時運行腳本 |
鼠標事件(Mouse Events)
通過鼠標觸發事件, 類似用戶的行爲:
屬性 | 值 | 描述 |
---|---|---|
onclick | script | 當單擊鼠標時運行腳本 |
ondblclick | script | 當雙擊鼠標時運行腳本 |
ondragNew | script | 當拖動元素時運行腳本 |
ondragendNew | script | 當拖動操作結束時運行腳本 |
ondragenterNew | script | 當元素被拖動至有效的拖放目標時運行腳本 |
ondragleaveNew | script | 當元素離開有效拖放目標時運行腳本 |
ondragoverNew | script | 當元素被拖動至有效拖放目標上方時運行腳本 |
ondragstartNew | script | 當拖動操作開始時運行腳本 |
ondropNew | script | 當被拖動元素正在被拖放時運行腳本 |
onmousedown | script | 當按下鼠標按鈕時運行腳本 |
onmousemove | script | 當鼠標指針移動時運行腳本 |
onmouseout | script | 當鼠標指針移出元素時運行腳本 |
onmouseover | script | 當鼠標指針移至元素之上時運行腳本 |
onmouseup | script | 當鬆開鼠標按鈕時運行腳本 |
onmousewheelNew | script | 當轉動鼠標滾輪時運行腳本 |
onscrollNew | script | 當滾動元素的滾動條時運行腳本 |
多媒體事件(Media Events)
通過視頻(videos),圖像(images)或者音頻(audio) 觸發該事件,多應用於HTML媒體元素比如
屬性 | 值 | 描述 |
---|---|---|
onabort | script | 當發生中止事件時運行腳本 |
oncanplayNew | script | 當媒介能夠開始播放但可能因緩衝而需要停止時運行腳本 |
oncanplaythroughNew | script | 當媒介能夠無需因緩衝而停止即可播放至結尾時運行腳本 |
ondurationchangeNew | script | 當媒介長度改變時運行腳本 |
onemptiedNew | script | 當媒介資源元素突然爲空時(網絡錯誤、加載錯誤等)運行腳本 |
onendedNew | script | 當媒介已抵達結尾時運行腳本 |
onerrorNew | script | 當在元素加載期間發生錯誤時運行腳本 |
onloadeddataNew | script | 當加載媒介數據時運行腳本 |
onloadedmetadataNew | script | 當媒介元素的持續時間以及其他媒介數據已加載時運行腳本 |
onloadstartNew | script | 當瀏覽器開始加載媒介數據時運行腳本 |
onpauseNew | script | 當媒介數據暫停時運行腳本 |
onplayNew | script | 當媒介數據將要開始播放時運行腳本 |
onplayingNew | script | 當媒介數據已開始播放時運行腳本 |
onprogressNew | script | 當瀏覽器正在取媒介數據時運行腳本 |
onratechangeNew | script | 當媒介數據的播放速率改變時運行腳本 |
onreadystatechangeNew | script | 當就緒狀態(ready-state)改變時運行腳本 |
onseekedNew | script | 當媒介元素的定位屬性 [1] 不再爲真且定位已結束時運行腳本 |
onseekingNew | script | 當媒介元素的定位屬性爲真且定位已開始時運行腳本 |
onstalledNew | script | 當取回媒介數據過程中(延遲)存在錯誤時運行腳本 |
onsuspendNew | script | 當瀏覽器已在取媒介數據但在取回整個媒介文件之前停止時運行腳本 |
ontimeupdateNew | script | 當媒介改變其播放位置時運行腳本 |
onvolumechangeNew | script | 當媒介改變音量亦或當音量被設置爲靜音時運行腳本 |
onwaitingNew | script | 當媒介已停止播放但打算繼續播放時運行腳本 |
其他事件
屬性 | 值 | 描述 |
---|---|---|
onshowNew | script | 當 元素在上下文顯示時觸發 |
ontoggleNew | script | 當用戶打開或關閉 元素時觸發 |
HTML 音頻/視頻 DOM 參考手冊
HTML5 DOM 爲 <audio> 和 <video> 元素提供了方法、屬性和事件。
這些方法、屬性和事件允許您使用 JavaScript 來操作 <audio> 和 <video> 元素。
HTML 音頻/視頻 方法
方法 | 描述 |
---|---|
addTextTrack() | 向音頻/視頻添加新的文本軌道。 |
canPlayType() | 檢測瀏覽器是否能播放指定的音頻/視頻類型。 |
load() | 重新加載音頻/視頻元素。 |
play() | 開始播放音頻/視頻。 |
pause() | 暫停當前播放的音頻/視頻。 |
HTML 音頻/視頻屬性
屬性 | 描述 |
---|---|
audioTracks | 返回表示可用音頻軌道的 AudioTrackList 對象。 |
autoplay | 設置或返回是否在加載完成後隨即播放音頻/視頻。 |
buffered | 返回表示音頻/視頻已緩衝部分的 TimeRanges 對象。 |
controller | 返回表示音頻/視頻當前媒體控制器的 MediaController 對象。 |
controls | 設置或返回音頻/視頻是否顯示控件(比如播放/暫停等)。 |
crossOrigin | 設置或返回音頻/視頻的 CORS 設置。 |
currentSrc | 返回當前音頻/視頻的 URL。 |
currentTime | 設置或返回音頻/視頻中的當前播放位置(以秒計)。 |
defaultMuted | 設置或返回音頻/視頻默認是否靜音。 |
defaultPlaybackRate | 設置或返回音頻/視頻的默認播放速度。 |
duration | 返回當前音頻/視頻的長度(以秒計)。 |
ended | 返回音頻/視頻的播放是否已結束。 |
error | 返回表示音頻/視頻錯誤狀態的 MediaError 對象。 |
loop | 設置或返回音頻/視頻是否應在結束時重新播放。 |
mediaGroup | 設置或返回音頻/視頻所屬的組合(用於連接多個音頻/視頻元素)。 |
muted | 設置或返回音頻/視頻是否靜音。 |
networkState | 返回音頻/視頻的當前網絡狀態。 |
paused | 設置或返回音頻/視頻是否暫停。 |
playbackRate | 設置或返回音頻/視頻播放的速度。 |
played | 返回表示音頻/視頻已播放部分的 TimeRanges 對象。 |
preload | 設置或返回音頻/視頻是否應該在頁面加載後進行加載。 |
readyState | 返回音頻/視頻當前的就緒狀態。 |
seekable | 返回表示音頻/視頻可尋址部分的 TimeRanges 對象。 |
seeking | 返回用戶是否正在音頻/視頻中進行查找。 |
src | 設置或返回音頻/視頻元素的當前來源。 |
startDate | 返回表示當前時間偏移的 Date 對象。 |
textTracks | 返回表示可用文本軌道的 TextTrackList 對象。 |
videoTracks | 返回表示可用視頻軌道的 VideoTrackList 對象。 |
volume | 設置或返回音頻/視頻的音量。 |
HTML 音頻/視頻事件
事件 | 描述 |
---|---|
abort | 當音頻/視頻的加載已放棄時觸發。 |
canplay | 當瀏覽器可以開始播放音頻/視頻時觸發。 |
canplaythrough | 當瀏覽器可在不因緩衝而停頓的情況下進行播放時觸發。 |
durationchange | 當音頻/視頻的時長已更改時觸發。 |
emptied | 當目前的播放列表爲空時觸發。 |
ended | 當目前的播放列表已結束時觸發。 |
error | 當在音頻/視頻加載期間發生錯誤時觸發。 |
loadeddata | 當瀏覽器已加載音頻/視頻的當前幀時觸發。 |
loadedmetadata | 當瀏覽器已加載音頻/視頻的元數據時觸發。 |
loadstart | 當瀏覽器開始查找音頻/視頻時觸發。 |
pause | 當音頻/視頻已暫停時觸發。 |
play | 當音頻/視頻已開始或不再暫停時觸發。 |
playing | 當音頻/視頻在因緩衝而暫停或停止後已就緒時觸發。 |
progress | 當瀏覽器正在下載音頻/視頻時觸發。 |
ratechange | 當音頻/視頻的播放速度已更改時觸發。 |
seeked | 當用戶已移動/跳躍到音頻/視頻中的新位置時觸發。 |
seeking | 當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發。 |
stalled | 當瀏覽器嘗試獲取媒體數據,但數據不可用時觸發。 |
suspend | 當瀏覽器刻意不獲取媒體數據時觸發。 |
timeupdate | 當目前的播放位置已更改時觸發。 |
volumechange | 當音量已更改時觸發。 |
waiting | 當視頻由於需要緩衝下一幀而停止時觸發。 |