HTML - 事件參考：初學者指南，讓您的網頁互動起來
Hello there, future web developers! I'm thrilled to be your guide on this exciting journey into the world of HTML events. As someone who's been teaching computer science for over a decade, I can tell you that understanding events is like learning the secret language of web interactivity. So, let's dive in and unlock this magical realm together!
什麼是 HTML 事件？
在我們深入細節之前，讓我們先了解 HTML 事件是什麼。想像您在一個派對上（一個網頁），每次您做些事情 - 比如您轻触某人的肩膀（點擊按鈕）或低語一個秘密（輸入文字）- 那就是一個事件。在網頁世界中，事件是發生在您瀏覽器中的動作或發生的事情，您的 HTML 可以偵測並對其作出反應。酷炫吧？
現在，讓我們探索不同類型的事件以及如何使用它們。
窗口事件屬性
窗口事件就像您網頁房子的門鈴。它們告訴您當有人來訪或離開時。
這裡是一個常見窗口事件的表格：
| 事件 | 描述 |
|---|---|
| onload | 在頁面加載完畢時觸發 |
| onunload | 在用戶離開頁面時觸發 |
| onresize | 在瀏覽器窗口調整大小时觸發 |
| onscroll | 在用戶滾動頁面時觸發 |
讓我們看一個例子：
<body onload="alert('歡迎來到我的頁面！')">
<h1>我的超棒網站</h1>
</body>在這個例子中，當頁面一加載，您就會看到一個歡迎提示。就像迎接到訪客一樣！
表單事件
表單是真正互動發生的地方。就像與您的用戶進行對話。
這裡是一個表單事件的表格：
| 事件 | 描述 |
|---|---|
| onsubmit | 在表單提交時觸發 |
| onreset | 在表單重置時觸發 |
| onchange | 在輸入的值改變時觸發 |
| onfocus | 在元素獲得焦點時觸發 |
| onblur | 在元素失去焦點時觸發 |
讓我們看一個例子：
<form onsubmit="alert('表單已提交！'); return false;">
<input type="text" onchange="this.style.backgroundColor='yellow'">
<input type="submit" value="提交">
</form>在這個表單中，當您改變文本輸入，它會變成黃色（驚喜！），當您提交時，您會收到一個提示。就像表單在回應您！
鍵盤事件
鍵盤事件是關於您的手指在鍵盤上舞動時發生的事情。
這裡是一個鍵盤事件的表格：
| 事件 | 描述 |
|---|---|
| onkeydown | 在按鍵被按下時觸發 |
| onkeyup | 在按鍵被釋放時觸發 |
| onkeypress | 在按鍵被按下並釋放時觸發 |
讓我們試一個例子：
<input type="text" onkeypress="document.body.style.backgroundColor='lightblue'">每次您在這個輸入框中按下一個鍵，頁面背景會變成淺藍色。就像玩一個會繪畫的鋼琴！
鼠標事件
鼠標事件是關於點擊和移動。
這裡是一個鼠標事件的表格：
| 事件 | 描述 |
|---|---|
| onclick | 在元素被點擊時觸發 |
| ondblclick | 在元素被雙擊時觸發 |
| onmouseover | 在鼠標移動到元素上時觸發 |
| onmouseout | 在鼠標從元素移開時觸發 |
讓我們看看它們在行動：
<button onclick="this.innerHTML='已點擊！'"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">
點我！
</button>這個按鈕在您悬停時變色，並在您點擊時改變文字。就像一個變色龍按鈕！
拖動事件
拖動事件使您的元素可移動，就像棋盤上的棋子。
這裡是一個拖動事件的表格：
| 事件 | 描述 |
|---|---|
| ondrag | 在元素被拖動時觸發 |
| ondragstart | 在用戶開始拖動元素時觸發 |
| ondragend | 在用戶完成拖動元素時觸發 |
這裡有一個簡單的例子：
<div draggable="true" ondragstart="alert('開始拖動！')">
拖動我！
</div>當您開始拖動這個 div，它會提示您。就像元素在說，“嗚嗚！我在飛！”
剪貼板事件
剪貼板事件是關於複製、剪切和粘貼。
這裡是一個剪貼板事件的表格：
| 事件 | 描述 |
|---|---|
| oncopy | 在用戶複製內容時觸發 |
| oncut | 在用戶剪切內容時觸發 |
| onpaste | 在用戶粘貼內容時觸發 |
讓我們看一個例子：
<textarea oncopy="alert('已複製！')" oncut="alert('已剪切！')" onpaste="alert('已粘貼！')">
在這裡嘗試複製、剪切或粘貼！
</textarea>這個文本區會告訴您當您進行剪貼板操作時。就像有一個健談的筆記本！
媒體事件
媒體事件是當您在頁面上播放音頻或視頻時。
這裡是一個媒體事件的表格：
| 事件 | 描述 |
|---|---|
| onplay | 在媒體開始播放時觸發 |
| onpause | 在媒體暫停時觸發 |
| onended | 在媒體播放完畢時觸發 |
這裡有一個快速的例子：
<audio src="song.mp3" controls onplay="alert('享受音樂！')" onended="alert('希望您喜歡它！')"></audio>這個音頻元素在您開始播放時問候您，在播放結束時請求您的反饋。就像一個關心您意見的DJ！
雜項事件
還有許多其他事件不適合輕易地歸類。這裡有一些：
| 事件 | 描述 |
|---|---|
| onerror | 在發生錯誤時觸發 |
| oncontextmenu | 在用戶右鍵點擊時觸發 |
| onwheel | 在鼠標滾動時觸發 |
讓我們看一個在行動：
<img src="image.jpg" onerror="this.src='default.jpg'">如果圖像加載失敗，它會自動切換到默認圖像。就像有一個準備好的備胎舞者！
那就是全部，各位！您已經踏出了進入 HTML 事件世界的第一步。記住，掌握事件的關鍵是練習。嘗試組合不同的事件，嘗試新的想法，最重要的是，玩得開心！
就像我總是告訴我的學生，編程就像烹飪 - 您可能會一開始搞得亂七八糟，但隨著練習，您很快就能創造出傑作。所以，繼續玩這些事件，並觀察您的網頁變得生動起來！
Credits: Image by storyset