【HTML 筆記】事件屬性【part 3】
===
[TOC]
Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。
事件屬性
---
這種屬性通常會觸發 javascript 腳本，然後做出一系列的事件。
### 常用屬性表
| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| onafterprint | body | 網頁內容要被列印之後。 |
| onbeforeprint | body | 網頁內容要被列印之前。 |
| onbeforeunload | body | 網頁內容尚未載入之前。 |
| onerror | audio、body、embed、img、object、script、style、video | 元素內容錯誤發生時。 |
| onhashchange | body | 網頁網址的 hash tag 改變時。 |
| onload | body、iframe、img、input、link、script、style | 元素內容載入時。 |
| onoffline | body | 網頁斷線時。 |
| ononline | body | 網頁連線時。 |
| onpageshow | body | 當網頁顯示。 |
| onresize | body | 網頁大小改變時。 |
| onsearch | input 為 search | 搜尋發生時。 |
| onunload | body | 網頁內容尚未載入時。 |
表格來源：https://steam.oxxostudio.tw/category/html/info/attributes.html
onafterprint，當網頁內容列印完成後觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onafterprint="alert('列印完成')">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
提示：ctrl+P 可開啟列印功能。
onbeforeprint，當網頁內容即將列印前觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onbeforeprint="alert('即將列印')">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
按下列印時就會出現的訊息框。
onbeforeunload，當網頁即將關閉或刷新前觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onbeforeunload="return '確定要離開嗎？'">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
註：按下 F5 刷新時就會出現。
onerror，當元素內容載入失敗時觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<img src="invalid.jpg" onerror="alert('圖片載入失敗！')">
</body>
</html>
```
如果圖片存在的話，就會照常顯示圖片，否則將跳出以下訊息框。
onhashchange，當網址的hash（#後的部分）改變時觸發。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onhashchange="alert('Hash 改變了！')">
<a href="#section1">跳到Section1</a>
</body>
</body>
</html>
```
onload，當元素內容載入完成時觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onload="alert('頁面載入完成！')">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
onpageshow，當網頁顯示時觸發，其實跟上一個蠻像的。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onpageshow="alert('頁面顯示了！')">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
onresize，當網頁視窗大小改變時觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onresize="alert('視窗大小改變了！')">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
onsearch，當搜尋動作發生時觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<input type="search" onsearch="alert('搜尋了！')">
</body>
</html>
```
onunload，當網頁關閉或刷新時觸發：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onunload="alert('頁面即將關閉！')">
<p>這是網頁內容。</p>
</body>
</body>
</html>
```
不知為啥我試這個的時候沒啥效果。
### 事件屬性（所有可見元素）
| 屬性 | 說明 |
| -------- | -------- |
| onblur | 元素失焦時。 |
| oncopy | 元素內容被複製時。 |
| oncut | 元素內容被剪下時。 |
| onpaste | 在元素上貼上內容。 |
| onclick | 元素被點擊時。 |
| ondblclick | 元素被滑鼠雙擊時。 |
| ondrag | 元素拖動時。 |
| ondragend | 元素拖動結束時。 |
| ondragenter | 被拖動的元素進入時。 |
| ondragleave | 被拖動的元素離開時。 |
| ondragover | 被拖動的元素覆蓋時。 |
| ondragstart | 元素拖動開始時。 |
| ondrop | 拖動的元素放下時。 |
| onfocus | 元素成為焦點時。 |
| oninput | 在元素裡輸入內容時。 |
| oninvalid | 元素內容為無效腳本時。 |
| onkeydown | 在元素裡按下鍵盤按鍵。 |
| onkeypress | 在元素裡將鍵盤按鍵按著不放。 |
| onkeyup | 在元素裡放開鍵盤按鍵。 |
| onmousedown | 在元素上按下滑鼠。 |
| onmousemove | 在元素上移動滑鼠。 |
| onmouseout | 滑鼠離開元素。 |
| onmouseover | 滑鼠在元素上面。 |
| onmouseup | 在元素上放開滑鼠。 |
| onmousewheel | 在元素上滾動滑鼠滾輪。 |
| onscroll | 元素的捲軸被捲動時。 |
| onwheel | 在元素上滾動滑鼠滾輪。 |
| onselect | 元素被選取時（針對 input）。 |
| onreset | 元素被重設時（針對 form）。 |
表格來源：https://steam.oxxostudio.tw/category/html/info/attributes.html
因為這屬性太多了，所以抓十個常用的來當範例：
onclick：當按鈕被點擊時，會彈出一個對話框顯示「按鈕被點擊了！」。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<button onclick="alert('按鈕被點擊了！')">點擊我</button>
</body>
</html>
```
onmouseover：當滑鼠移到 div 上時，背景顏色會變為黃色。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<div onmouseover="this.style.backgroundColor='yellow'">滑鼠移到我這裡</div>
</body>
</html>
```
註：`this.style.border` 是 js 寫法，因為事件屬性都屬於 js 的範圍，所以在 js 中為了要修改顏色，必須使用此條指令。
onmouseout：當滑鼠從 div 上移開時（前提要先碰到 div，再移開才有效果），背景顏色會恢復為白色。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<div onmouseover="this.style.backgroundColor='yellow'">滑鼠移到我這裡</div>
<div onmouseout="this.style.backgroundColor='red'">滑鼠移開我</div>
</body>
</html>
```
以上範例搭配 onmouseover 使用。
onfocus：當輸入框取得焦點時（如點擊或用 Tab 鍵進入），邊框會變為 2px 藍色實線。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<input type="text" onfocus="this.style.border='2px solid blue'">
</body>
</html>
```
onblur：當輸入框失去焦點時，邊框會恢復為 1px 黃色實線。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<input type="text" onblur="this.style.border='1px solid yellow'">
</body>
</html>
```
onkeydown：當按下鍵盤上的任意按鍵時，body 的背景顏色會變為淺藍色。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onkeydown="this.style.backgroundColor='lightblue'">按下任意鍵</body>
</body>
</html>
```
onkeyup：當放開鍵盤上的按鍵時，body 的背景顏色會恢復為白色。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<body onkeydown="this.style.backgroundColor='lightblue'">按下任意鍵變色<br></body>
<body onkeyup="this.style.backgroundColor='white'">放開按鍵變回去白色</body>
</body>
</html>
```
可以試一下，超級好玩XD。
oninput：當在輸入框中輸入內容時，輸入的文字會實時顯示在下方段落中。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<input type="text" oninput="document.getElementById('display').innerText = this.value">
<p id="display"></p>
</body>
</html>
```
onselect：當在輸入框中選擇文字時，輸入框的背景顏色會變為黃色。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<input type="text" value="選擇一些文字" onselect="this.style.backgroundColor='yellow'">
</body>
</html>
```
onreset：當點擊表單中的重置按鈕時，會彈出文字框顯示「表單已重置！」，然後表單字段會被清空。
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<form onreset="alert('表單已重置！')">
<input type="text">
<input type="reset" value="重置">
</form>
</body>
</html>
```
### 事件屬性（多媒體、圖片、影音）
| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| onabort | audio、embed、img、object、video | 多媒體元素的加載被中斷時。 |
| oncanplay | audio、embed、object、video | 多媒體檔案能夠播放時。 |
| ondurationchange | audio、video | 多媒體元素內容長度改變時。 |
| onemptied | audio、video | 多媒體元素檔案突然不可用時。 |
| onended | audio、video | 多媒體元素檔案播放完成時。 |
| onloadeddata | audio、video | 多媒體元素內容載入完成時。 |
| onloadstart | audio、video | 多媒體元素內容開始載入時。 |
| onstalled | audio、video | 多媒體元素的內容載入錯誤時。 |
| onvolumechange | audio、video | 多媒體元素音量改變時。 |
| onwaiting | audio、video | 多媒體元素等待載入時。 |
| onpause | audio、video | 多媒體元素的內容暫停時。 |
| onplay | audio、video | 多媒體元素的內容開始播放時。 |
| onplaying | audio、video | 多媒體元素的內容正在播放時。 |
| onratechange | audio、video | 多媒體元素的內容比率改變時。 |
表格來源：https://steam.oxxostudio.tw/category/html/info/attributes.html#a7
以下是個大雜燴的範例：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件屬性表範例</title>
</head>
<body>
<h1>HTML 多媒體事件屬性測試</h1>
<p>以下影片為測試各種事件屬性（點擊播放、暫停、調整音量等）：</p>
<video controls
onabort="alert('載入被中斷！')"
oncanplay="alert('可以播放了！')"
ondurationchange="alert('播放時長改變了！')"
onemptied="alert('檔案不可用！')"
onended="alert('播放結束！')"
onloadeddata="alert('內容載入完成！')"
onloadstart="alert('開始載入內容！')"
onstalled="alert('載入錯誤！')"
onvolumechange="alert('音量改變了！')"
onwaiting="alert('正在等待載入！')"
onpause="alert('暫停播放！')"
onplay="alert('開始播放！')"
onplaying="alert('正在播放！')"
onratechange="alert('播放速率改變了！')">
<source src="1718848236_Sample_1.mp4" type="video/mp4">
您的瀏覽器不支援video元素。
</video>
</body>
</html>
```
參考資料
---
[HTML 元素屬性 - HTML 教學 | STEAM 教育學習網](https://steam.oxxostudio.tw/category/html/info/attributes.html#a7)
Sign in with Wallet
Connect another wallet