jQuery 事件方法總覽：滑鼠、鍵盤、表單與瀏覽器事件
頁面對不同訪問者的互動稱作 事件（Event） 。例如：點擊了某個按鈕、選取某個方塊、捲動了畫面、滑鼠的移動。
雖然正在學習的是 jQuery ，但別忘了，jQuery 的底層也是由 JavaScript 建構起來的。因此，關於 jQuery Event 的內容亦可參考 Event 事件處理 這篇文章。
小提醒
還記得在 jQuery 的語法構成 所介紹的 action() 嗎？就是對元素進行某項操作。現在，我們就要對元素進行事件操作。
常見 Event 事件
jQuery 依觸發來源把常用的事件分成以下五類。不論屬於哪一類，用法都是同一套：先 選取對象 ，再指定要監聽的事件與處理函式。
滑鼠事件
網頁上最常見的互動來源，按鈕、選單、圖片檢視背後幾乎都是它們。這一類事件的觸發時機定義得很精細，按下與放開、進入與離開往往分屬不同的事件，挑錯就會得到與預期不符的結果。
| 事件名稱 | 說明 |
|---|---|
click() | 滑鼠點擊同一個 DOM，按下滑鼠左鍵並放開。 |
dblclick() | 滑鼠兩次點擊並放開時。 |
mouseenter() | 滑鼠進入 DOM 的範圍中。只會觸發一次，在 DOM 內部移動並不會引起觸發。 |
mouseleave() | 滑鼠離開 DOM 的範圍。 |
hover() | jQuery 包裝的方法。在同一個 DOM 分別註冊 mouseenter 與 mouseleave 兩個事件。 |
用法與參數詳見 滑鼠事件 。
鍵盤事件
接收使用者的按鍵輸入，常見於輸入框的即時驗證、搜尋建議與快捷鍵。按下與放開分屬不同的事件，至於使用者按了哪一顆按鍵，則要看 事件物件 。
| 事件名稱 | 說明 |
|---|---|
keydown() | 按下鍵盤按鍵時。 |
keypress() | 按下並放開鍵盤按鍵後。（只對能產生文字符號的按鍵有效） |
keyup() | 放開鍵盤按鍵時。 |
表單事件
涵蓋使用者填寫資料的整個流程，從欄位取得焦點、修改內容，到最後把 表單 送出為止。各方法的觸發時機疏密不同，選擇前先想清楚需要的是即時回饋還是最終結果。
| 事件名稱 | 說明 |
|---|---|
submit() | 表單 送出時。 |
change() | 當表單的值完成變更時觸發，或是輸入文字而失去焦點時觸發。 |
focus() | 取得焦點時。 |
blur() | 失去焦點時。 |
載入事件
用來確認頁面或某項資源是否已經就緒。實務上用到的場合不多，因為多數操作只要 DOM 結構就緒就能開始，不必等到圖片與樣式全部載入完畢。
| 事件名稱 | 說明 |
|---|---|
load() | 資源載入完成後。 |
unload() | 關閉網頁之後。 |
瀏覽器事件
監聽對象通常是 window 而不是某個元素，用來得知視窗尺寸與捲動位置這類瀏覽環境的變化。這一類事件觸發極為頻繁，處理函式太重就會讓畫面明顯卡頓。
| 事件名稱 | 說明 |
|---|---|
resize() | 視窗或容器大小改變時。 |
scroll() | 捲軸移動時觸發。 |
用法與參數詳見 瀏覽器事件 。
統一改用 on() 註冊
上表的捷徑方法在 jQuery 3 之後陸續被標記為 即將棄用 ，官方建議一律改用 on() 來註冊事件。
// 即將棄用
$('#Dom').click(handler);
// 改用
$('#Dom').on('click', handler);on() 也是唯一支援 事件委派 的寫法，可以把監聽掛在父層，對之後才動態產生的元素一樣生效。
常見問題
為什麼建議改用 on 註冊事件？
click()、hover() 這類捷徑方法在 jQuery 3 之後陸續被標記為即將棄用，官方統一建議改用 on()。on() 也是唯一支援 事件委派 的寫法，可以對之後才產生的元素生效。
mouseenter 和 mouseover 差在哪？
mouseover 會因為事件冒泡，在滑鼠移進子元素時重複觸發；mouseenter 只在真正進入該元素的範圍時觸發一次，在子元素之間移動並不會再次觸發。
change 和 input 事件怎麼選？
change 是值變更完成、通常是欄位失去焦點後才觸發；若要在使用者每敲一個字時就即時反應，應該監聽 input，可參考 常用小技巧 。
scroll 事件會不會太頻繁？
會。捲動時 scroll 每秒可能觸發數十次，處理函式若太重會造成畫面卡頓，實務上通常搭配節流（throttle）或改用 IntersectionObserver。
延伸閱讀
參考資料：jQuery API：Events