# 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 的时候，就像是在问：“谁是这个事件的主角？”然后你就可以根据这个主角（元素）来做一些操作，比如改变它的颜色、移动它的位置等等。