程式語言：Javascript
w3schools HTML Event Attributes
簡介：所有相關 event
但最常用在 media 元素，像是 <audio>、<embed>、<img>、<object>、<video>
w3schools HTML Event Attributes
簡介：所有相關 event
addEventListener(event, function, useCapture);
- event : on 無需寫 e.g. onclick => click
- function : 執行的 function
- useCapture
- true - event 從 parent 到 child 往下傳，由外而內
- false- Default. event 從 child 到 parent 往上傳，由內而外
// add event
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// remove event
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
Window Event
應用在 <body>>| onafterprint | 影印後觸發 |
|---|---|
| onbeforeprint | 影印前觸發 |
| onbeforeunload | document 卸載前觸發 (F5 更新 or 關閉視窗) |
| onerror | 檔案載入失敗觸發 |
| onhashchange | document 改變後觸發 |
| onload | 載入完畢觸發 |
| onmessage | 得到 message 時觸發 client 用 postMessage(send) 送出 message server 用 onmessage 監聽 |
| onoffline | 更改為離線瀏覽時觸發 |
| ononline | 取消離線瀏覽時觸發 |
| onpagehide | 類似 onunload，但 onunload 會造成頁面不被 cached |
| onpageshow | 類似 onload，但 onload 只發生在第一次載入，若從 cache 讀取不觸發 |
| onpopstate | 歷史記錄改變後觸發 |
| onresize | 更改視窗大小後觸發 |
| onstorage | web 存儲區域（DOM Storage）更新後觸發 |
| onunload | document 卸載後觸發 (F5 更新 or 關閉視窗) |
Form Events
應用在所有元素，但最常用在 <form>| onblur | 失去焦點後觸發 |
|---|---|
| onchange | value 改變後觸發 |
| oncontextmenu | 出現右鍵選單前觸發 |
| onfocus | 得到焦點後觸發 |
| oninput | 寫入 <input> 觸發 |
| oninvalid | submit 後，填入的值不正確時觸發 |
| onreset | 點選 reset 按鈕觸發 |
| onsearch | submit input="search") 時觸發 |
| onselect | text 被反白時觸發 |
| onsubmit | submit 後觸發 |
Keyboard Events
| onkeydown | 按住鍵時觸發 |
|---|---|
| onkeypress | 按鍵後觸發 |
| onkeyup | 放開鍵後觸發 |
Mouse Events
| onclick | 點選觸發 |
|---|---|
| ondblclick | 連點兩下觸發 |
| ondragstart | 開始拖曳觸發 |
| ondrag | 拖曳時觸發 |
| ondragend | 結束拖曳觸發 |
| ondragenter | 拖曳物進入拖曳區觸發 |
| ondragover | 拖曳物在拖曳區上時持續觸發 |
| ondragleave | 拖曳物離開拖曳區觸發 |
| ondrop | 當拖曳物件落下觸發 |
| onmousedown | 按住鍵時觸發 |
| onmousemove | 在上方滑動觸發 |
| onmouseout | 離開觸發 |
| onmouseover | 在上方時觸發，僅一次 |
| onmouseup | 放開鍵後觸發 |
| onmousewheel | 滾輪滑動觸發，不讚成使用. 用 onwheel 取代 |
| onscroll | scroll bar 移動時觸發 |
| onwheel | 滾輪滑動觸發 |
Clipboard Events
| oncopy | 複製觸發 |
|---|---|
| oncut | 剪下觸發 |
| onpaste | 貼上觸發 |
Media Events
應用在所有元素但最常用在 media 元素，像是 <audio>、<embed>、<img>、<object>、<video>
| onabort | 載入的檔案被放棄觸發 |
|---|---|
| onloadstart | 開始載入前觸發 |
| ondurationchange | 播放長度被改變觸發(載入時會改變) |
| onloadedmetadata | meta data 已載入 (duration, dimensions (video only) and text tracks) |
| onloadeddata | 檔案開始載入觸發 |
| onprogress | 檔案載入中觸發 |
| oncanplay | 可播放觸發(足夠的 buffer 開始) |
| oncanplaythrough | 可播放且不會因載入中斷 |
| oncuechange | Script to be run when the cue changes in a <track> |
| onemptied | 當發生故障並且突然不可用時觸發 |
| onended | 播放已結束觸發 |
| onerror | 檔案載入失敗觸發 |
| onpause | 暫停觸發 |
| onplay | 播放觸發 |
| onplaying | 播放中觸發 |
| onratechange | 播放速率改變觸發 |
| onseeked | 拖動時間軸後觸發，當 seeking 屬性設置為 false 時觸發 |
| onseeking | 拖動時間軸時觸發，當 seeking 屬性設置為 true 時觸發 |
| onstalled | 在瀏覽器不論何種原因未能取回檔案時觸發 |
| onsuspend | 完全載入之前，不論何種原因被終止時觸發 |
| ontimeupdate | 播放位置改變後觸發 |
| onvolumechange | 音量改變後觸發 |
| onwaiting | 等待載入時觸發 |
Misc Events
| onerror | 檔案載入失敗觸發 |
|---|---|
| onshow | <menu> 顯示前觸發 |
| ontoggle | <details> 點選觸發 |
留言
張貼留言