---
# System prepended metadata

title: 【HTML 筆記】事件屬性【part 3】
tags: [HTML, 網頁程式設計, 網頁]

---

【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>
```

![image](https://hackmd.io/_uploads/SypuV9IR1e.png)

提示：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>
```

![image](https://hackmd.io/_uploads/BkZsEqUAkg.png)

按下列印時就會出現的訊息框。

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 刷新時就會出現。

![image](https://hackmd.io/_uploads/SysXHqICye.png)

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>
```

如果圖片存在的話，就會照常顯示圖片，否則將跳出以下訊息框。

![image](https://hackmd.io/_uploads/HJqOB9L01g.png)

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>
```

![image](https://hackmd.io/_uploads/H1P2r5LCJx.png)

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>
```

![image](https://hackmd.io/_uploads/SkTRHqUR1e.png)

![image](https://hackmd.io/_uploads/Byl1L5LAyg.png)

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>
```

![image](https://hackmd.io/_uploads/rJpmLcUR1x.png)

![image](https://hackmd.io/_uploads/rk-4IcLCye.png)

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>
```

![image](https://hackmd.io/_uploads/SyVDUcIAJx.png)

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>
```

![image](https://hackmd.io/_uploads/r1ZjU9LR1g.png)

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>
```

![image](https://hackmd.io/_uploads/S1b9pcL0yl.png)

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 中為了要修改顏色，必須使用此條指令。

![image](https://hackmd.io/_uploads/H1RCaqUCkl.png)

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 使用。

![image](https://hackmd.io/_uploads/Bkup1s8Rkl.png)

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>
```

![image](https://hackmd.io/_uploads/rypMgoIRkg.png)

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>
```

![image](https://hackmd.io/_uploads/BJX4WsUR1x.png)

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>
```

![image](https://hackmd.io/_uploads/r19C-iLR1x.png)

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。

![image](https://hackmd.io/_uploads/SJZNziLRyx.png)

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>
```

![image](https://hackmd.io/_uploads/r1WdMj8Ryg.png)

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>
```

![image](https://hackmd.io/_uploads/HyeiMiIRyg.png)

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>
```

![image](https://hackmd.io/_uploads/SJsafsI0Jx.png)

### 事件屬性（多媒體、圖片、影音）

| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| 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>
```

![image](https://hackmd.io/_uploads/BkX6Ko80yg.png)

參考資料
---

[HTML 元素屬性 - HTML 教學 | STEAM 教育學習網](https://steam.oxxostudio.tw/category/html/info/attributes.html#a7)