HTML 事件、音頻/視頻

HTML 事件屬性


全局事件屬性

HTML 4 的新特性之一是可以使 HTML 事件觸發瀏覽器中的行爲,比方說當用戶點擊某個 HTML 元素時啓動一段 JavaScript。

如果你想學習更多關於事件屬性,請訪問 JavaScript 教程

下面的表格提供了標準的事件屬性,可以把它們插入 HTML/XHTML 元素中,以定義事件行爲。

New : HTML5新增屬性事件。


窗口事件屬性(Window Event Attributes)

由窗口觸發該事件 (適用於 標籤):

屬性描述
onafterprintNewscript在打印文檔之後運行腳本
onbeforeprintNewscript在文檔打印之前運行腳本
onbeforeonloadNewscript在文檔加載之前運行腳本
onblurscript當窗口失去焦點時運行腳本
onerrorNewscript當錯誤發生時運行腳本
onfocusscript當窗口獲得焦點時運行腳本
onhaschangeNewscript當文檔改變時運行腳本
onloadscript當文檔加載時運行腳本
onmessageNewscript當觸發消息時運行腳本
onofflineNewscript當文檔離線時運行腳本
ononlineNewscript當文檔上線時運行腳本
onpagehideNewscript當窗口隱藏時運行腳本
onpageshowNewscript當窗口可見時運行腳本
onpopstateNewscript當窗口歷史記錄改變時運行腳本
onredoNewscript當文檔執行再執行操作(redo)時運行腳本
onresizeNewscript當調整窗口大小時運行腳本
onstorageNewscript當 Web Storage 區域更新時(存儲空間中的數據發生變化時)運行腳本
onundoNewscript當文檔執行撤銷時運行腳本
onunloadNewscript當用戶離開文檔時運行腳本

表單事件(Form Events)

表單事件在HTML表單中觸發 (適用於所有 HTML 元素, 但該HTML元素需在form表單內):

屬性描述
onblurscript當元素失去焦點時運行腳本
onchangescript當元素改變時運行腳本
oncontextmenuNewscript當觸發上下文菜單時運行腳本
onfocusscript當元素獲得焦點時運行腳本
onformchangeNewscript當表單改變時運行腳本
onforminputNewscript當表單獲得用戶輸入時運行腳本
oninputNewscript當元素獲得用戶輸入時運行腳本
oninvalidNewscript當元素無效時運行腳本
onresetscript當表單重置時運行腳本。HTML 5 不支持。
onselectscript當選取元素時運行腳本
onsubmitscript當提交表單時運行腳本

鍵盤事件(Keyboard Events)

屬性描述
onkeydownscript當按下按鍵時運行腳本
onkeypressscript當按下並鬆開按鍵時運行腳本
onkeyupscript當鬆開按鍵時運行腳本

鼠標事件(Mouse Events)

通過鼠標觸發事件, 類似用戶的行爲:

屬性描述
onclickscript當單擊鼠標時運行腳本
ondblclickscript當雙擊鼠標時運行腳本
ondragNewscript當拖動元素時運行腳本
ondragendNewscript當拖動操作結束時運行腳本
ondragenterNewscript當元素被拖動至有效的拖放目標時運行腳本
ondragleaveNewscript當元素離開有效拖放目標時運行腳本
ondragoverNewscript當元素被拖動至有效拖放目標上方時運行腳本
ondragstartNewscript當拖動操作開始時運行腳本
ondropNewscript當被拖動元素正在被拖放時運行腳本
onmousedownscript當按下鼠標按鈕時運行腳本
onmousemovescript當鼠標指針移動時運行腳本
onmouseoutscript當鼠標指針移出元素時運行腳本
onmouseoverscript當鼠標指針移至元素之上時運行腳本
onmouseupscript當鬆開鼠標按鈕時運行腳本
onmousewheelNewscript當轉動鼠標滾輪時運行腳本
onscrollNewscript當滾動元素的滾動條時運行腳本

多媒體事件(Media Events)

通過視頻(videos),圖像(images)或者音頻(audio) 觸發該事件,多應用於HTML媒體元素比如

屬性描述
onabortscript當發生中止事件時運行腳本
oncanplayNewscript當媒介能夠開始播放但可能因緩衝而需要停止時運行腳本
oncanplaythroughNewscript當媒介能夠無需因緩衝而停止即可播放至結尾時運行腳本
ondurationchangeNewscript當媒介長度改變時運行腳本
onemptiedNewscript當媒介資源元素突然爲空時(網絡錯誤、加載錯誤等)運行腳本
onendedNewscript當媒介已抵達結尾時運行腳本
onerrorNewscript當在元素加載期間發生錯誤時運行腳本
onloadeddataNewscript當加載媒介數據時運行腳本
onloadedmetadataNewscript當媒介元素的持續時間以及其他媒介數據已加載時運行腳本
onloadstartNewscript當瀏覽器開始加載媒介數據時運行腳本
onpauseNewscript當媒介數據暫停時運行腳本
onplayNewscript當媒介數據將要開始播放時運行腳本
onplayingNewscript當媒介數據已開始播放時運行腳本
onprogressNewscript當瀏覽器正在取媒介數據時運行腳本
onratechangeNewscript當媒介數據的播放速率改變時運行腳本
onreadystatechangeNewscript當就緒狀態(ready-state)改變時運行腳本
onseekedNewscript當媒介元素的定位屬性 [1] 不再爲真且定位已結束時運行腳本
onseekingNewscript當媒介元素的定位屬性爲真且定位已開始時運行腳本
onstalledNewscript當取回媒介數據過程中(延遲)存在錯誤時運行腳本
onsuspendNewscript當瀏覽器已在取媒介數據但在取回整個媒介文件之前停止時運行腳本
ontimeupdateNewscript當媒介改變其播放位置時運行腳本
onvolumechangeNewscript當媒介改變音量亦或當音量被設置爲靜音時運行腳本
onwaitingNewscript當媒介已停止播放但打算繼續播放時運行腳本

其他事件

屬性描述
onshowNewscript當 元素在上下文顯示時觸發
ontoggleNewscript當用戶打開或關閉 元素時觸發

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當視頻由於需要緩衝下一幀而停止時觸發。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章