首頁 > 開發者 > JavaScript
使用者可以通過多種方式與瀏覽器中的頁面進行互動，而事件是互動的橋樑。 Web開發人員可以通過JavaScript內建的或者自訂的事件處理器來響應使用者的動作。
什麼是事件
廣義上講，Javascript指令碼中的事件是指使用者載入目標頁面直到該頁面被關閉期間瀏覽器的動作及該頁面對使用者操作的響應（如滑鼠移動、當前頁面的載入關閉，鍵盤輸入，拖拽頁面圖片，單擊浮動菜單等）。
事件處理器 是指與特定的文本和特定的事件相關聯的JavaScript代碼，當該文本發生改變或者事件被觸發時，瀏覽器執行該代碼並進行相應的處理操作，而響應某個事件從而進行改變或的處理過程即稱為事件處理。
下面是簡單的事件觸發和處理的過程：
事件捆綁
HTML文檔將元素的常用事件當做屬性捆綁在HTML元素上，當該元素的特定事件發生時，對應於此特定事件的事件處理器就會被執行，並將處理結果返回給瀏覽器。事件捆綁導致特定的代碼放置在所處對象的事件處理器中。
樣本：
<a href="http://www.baidu.com/" onclick=MyClick()">我是超連結</a>
function MyClick(){
alert("點擊了超連結");
}
1. HTML文檔事件
HTML文檔事件包括使用者載入目標頁面知道該頁面被關閉期間瀏覽器的動作及該頁面對使用者操作的響應。主要分為：瀏覽器事件 和 HTML元素事件兩大類。
1.1 瀏覽器事件
瀏覽器事件指：載入文檔知道該文檔被關閉期間的瀏覽器事件。如瀏覽器載入文檔事件onload、關閉該文檔事件onunload、瀏覽器失去焦時間點事件onblur、擷取焦時間點事件onfocus、拖動捲軸事件onscroll、調整視窗大小事件onresize等。
1.2 HTML元素事件
載入頁面後，使用者與頁面的互動主要指發生在如按鈕、連結、表單、圖片等HTML元素上的使用者動作以及該頁面對此動作所作出的響應。如按一下滑鼠按鈕事件（元素為button，事件為click，事件處理器為onclice）。只要瞭解了該事件的相關資訊，就可以編寫針對此介面的事件處理常式，也稱事件處理器，以完成諸如表單驗證、文字框內容選擇等功能。
HTML文檔中元素對應的事件因元素類型而異，下表按HTML4標記類型列出了當前通用版本瀏覽器上支援的事件：
| 標記類型 | 標記列表 | 事件觸發模型 | 簡要說明 |
|---|---|---|---|
| 串連 | <A> | onclick ondbclick onmouseDown onmouseOut onmouseOver onmouseUp onKeyDown onkeyPress onkeyUp |
按一下滑鼠連結 滑鼠雙擊串連 滑鼠在連結的位置按下 滑鼠移出連結所在的位置 滑鼠經過串連所在的位置 滑鼠在連結的位置放開 鍵被按下 按下並放開該鍵 鍵被鬆開 |
| 圖片 | <IMG> | onerror onload onkeyDown onkeyPress onkeyUp |
載入圖片出錯 圖片被載入時觸發 鍵被按下 按下並鬆開該鍵 鍵被鬆開 |
| 地區 | <AREA> | onDbClick onMouseOut onMouseOver |
雙擊該圖形映射地區 滑鼠從該圖形映射地區內移動到之外 滑鼠從該影像地圖地區外移動到之內 |
| 文檔主體 | <BODY> | onBlur onClick onDbClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp |
|
| 幀、幀組 | <FRAME> <FRAMESET> |
onblur onerror onfocus onload onresize onunload |
|
| 表單 | <FORM> | onReset onSubmit |
|
| 按鈕 | <INPUT TYPE= "button"> |
onBlur onClick onFocus onMouseDown onMouseUp |
|
| 複選框 單選框 |
<INPUT TYPE= "checkbox"> ="radio" |
onBlur onClick onFocus |
|
| 複位按鈕 提交按鈕 |
<INPUT TYPE= "reset"> ="submit" |
onBlur onClick onFocus |
|
| 口令欄位 | <INPUT TYPE= "password" |
onBlur onFocus |
|
| 文字欄位 | <INPUT TYPE= "text"> |
onBlur onChange onFocus onSelect |
|
| 文本區 | <TEXTAREA> | onblur onchange onfocus onKeyDown onKeyPress onKeyup onSelect |
|
| 選項 | <SELECT> | onblur onchange onfocus |
出於友好、保密、著作權等方面的考慮，通用瀏覽器上實現的事件已經不能滿足Javascript開發人員的需求，各大瀏覽器廠商都更新了自己的事件模型，擴充了自身支援的事件類型。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
