JS之DOM事件初體驗
阿新 • • 發佈：2020-10-17
什麼是事件
JavaScript建立動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函式或程式的事件。
比如說，當用戶單擊按鈕或者提交表單資料時，就發生一個滑鼠單擊（onclick）事件，需要瀏覽器做出處理，返回給使用者一個結果。
主要事件表:
下面為更全的事件表：
| 屬性 | 此事件發生在何時... |
|---|---|
| onabort | 影象的載入被中斷。 |
| onblur | 元素失去焦點。 |
| onchange | 域的內容被改變。 |
| onclick | 當用戶點選某個物件時呼叫的事件控制代碼。 |
| ondblclick | 當用戶雙擊某個物件時呼叫的事件控制代碼。 |
| onerror | 在載入文件或影象時發生錯誤。 |
| onfocus | 元素獲得焦點。 |
| onkeydown | 某個鍵盤按鍵被按下。 |
| onkeypress | 某個鍵盤按鍵被按下並鬆開。 |
| onkeyup | 某個鍵盤按鍵被鬆開。 |
| onload | 一張頁面或一幅影象完成載入。 |
| onmousedown | 滑鼠按鈕被按下。 |
| onmousemove | 滑鼠被移動。 |
| onmouseout | 滑鼠從某元素移開。 |
| onmouseover | 滑鼠移到某元素之上。 |
| onmouseup | 滑鼠按鍵被鬆開。 |
| onreset | 重置按鈕被點選。 |
| onresize | 視窗或框架被重新調整大小。 |
| onselect | 文字被選中。 |
| onsubmit | 確認按鈕被點選。 |
| onunload | 使用者退出頁面。 |
滑鼠 / 鍵盤屬性
| 屬性 | 描述 |
|---|---|
| altKey | 返回當事件被觸發時，"ALT" 是否被按下。 |
| button | 返回當事件被觸發時，哪個滑鼠按鈕被點選。 |
| clientX | 返回當事件被觸發時，滑鼠指標的水平座標。 |
| clientY | 返回當事件被觸發時，滑鼠指標的垂直座標。 |
| ctrlKey | 返回當事件被觸發時，"CTRL" 鍵是否被按下。 |
| metaKey | 返回當事件被觸發時，"meta" 鍵是否被按下。 |
| relatedTarget | 返回與事件的目標節點相關的節點。 |
| screenX | 返回當某個事件被觸發時，滑鼠指標的水平座標。 |
| screenY | 返回當某個事件被觸發時，滑鼠指標的垂直座標。 |
| shiftKey | 返回當事件被觸發時，"SHIFT" 鍵是否被按下。 |
游標聚焦事件（onfocus）
當網頁中的物件獲得聚點時，執行onfocus呼叫的程式就會被執行。
如下程式碼, 當將游標移到文字框內時，即焦點在文字框內，觸發onfocus 事件，並呼叫函式message()。
執行結果：
失焦事件（onblur）
onblur事件與onfocus是相對事件，當游標離開當前獲得聚焦物件的時候，觸發onblur事件，同時執行被呼叫的程式。
如下程式碼, 網頁中有使用者和密碼兩個文字框。當前游標在使用者文字框內時（即焦點在文字框），在游標離開該文字框後（即失焦時），觸發onblur事件，並呼叫函式message()。
執行結果：
文字框內容改變事件（onchange）
通過改變文字框的內容來觸發onchange事件，同時執行被呼叫的程式。
如下程式碼,當用戶將文字框內的文字改變後，彈出對話方塊“您改變了文字內容！”。
執行結果：
載入事件（onload）
事件會在頁面載入完成後，立即發生，同時執行被呼叫的程式。
注意：1.載入頁面時，觸發onload事件，事件寫在<body>標籤內。
2. 此節的載入頁面，可理解為開啟一個新頁面時。
如下程式碼,當載入一個新頁面時，彈出對話方塊“載入中，請稍等…”。
執行結果：
