【HTML 筆記】事件屬性【part 3】

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，當網頁內容列印完成後觸發：

<!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，當網頁內容即將列印前觸發：

<!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，當網頁即將關閉或刷新前觸發：

<!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，當元素內容載入失敗時觸發：

<!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（#後的部分）改變時觸發。

<!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，當元素內容載入完成時觸發：

<!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，當網頁顯示時觸發，其實跟上一個蠻像的。

<!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，當網頁視窗大小改變時觸發：

<!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，當搜尋動作發生時觸發：

<!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，當網頁關閉或刷新時觸發：

<!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：當按鈕被點擊時，會彈出一個對話框顯示「按鈕被點擊了！」。

<!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 上時，背景顏色會變為黃色。

<!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，再移開才有效果），背景顏色會恢復為白色。

<!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 藍色實線。

<!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 黃色實線。

<!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 的背景顏色會變為淺藍色。

<!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 的背景顏色會恢復為白色。

<!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：當在輸入框中輸入內容時，輸入的文字會實時顯示在下方段落中。

<!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：當在輸入框中選擇文字時，輸入框的背景顏色會變為黃色。

<!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：當點擊表單中的重置按鈕時，會彈出文字框顯示「表單已重置！」，然後表單字段會被清空。

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

以下是個大雜燴的範例：

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