---
# System prepended metadata

title: 20230812 Html事件
tags: [前端課程筆記]

---

# 20230812 Html事件
### Html事件
Html上可使某事件觸發特定行為
1. Window Event 視窗事件
(1)視窗物件(瀏覽器)的觸發事件
(2)需套用在<body>標籤中
(3)onload
當視窗載入完成後觸發
範例程式(架子會在網頁載入後從左側緩慢移入)
![](https://hackmd.io/_uploads/r1ZH-xUnh.png)
![](https://hackmd.io/_uploads/HJUqbgU23.png)
2. Form Event表單事件
(1)表單物件的觸發事件
(2)每個HTML元素都能用
(3)常見於form中
onblur
當失去focus時觸發
範例程式(使用者輸入完，將滑鼠點擊input以外的區域後，會將input文字都改為大寫)
![](https://hackmd.io/_uploads/Hky0w-823.png)
** 取得input內容: element.value
    ** 轉為大寫method: string.toUpperCase()
onchange
當使用者改變input時(包含select 與textrea)
範例程式(選擇男性時顯示服役，女性時隱藏)
![](https://hackmd.io/_uploads/HJYwyOqnn.png)
Form Event 表單事件
表單物件的觸發事件
每個HTML元素都能用
常見於form中
onblur
當失去focus時觸發
範例程式 (使用者輸入完，將滑鼠點擊input以外的區域後，會將input文字都改為大寫)
![](https://hackmd.io/_uploads/rk1teFs3h.png)

取得input內容: element.value
轉為大寫method: string.toUpperCase()
onchange

    
    
    
当你在网页上做一些操作，比如点击、拖动等，这些操作被称为事件。每个事件都有一个主角，就是触发（引发）这个事件的元素，比如你点击了一个按钮，那这个按钮就是主角。

假如你在一个派对上，有很多人，而你想知道是谁开始了一个活动，比如跳舞。那么，你会盯着跳舞的那个人，然后你就知道谁开始了活动。在网页上，event.target 就像你在派对上盯着那个跳舞的人一样，它告诉你在这个事件中，是哪个元素引发了这个事件。

所以，当你使用 event.target 的时候，就像是在问：“谁是这个事件的主角？”然后你就可以根据这个主角（元素）来做一些操作，比如改变它的颜色、移动它的位置等等。