初學者指南：深入了解 jQuery 事件處理
更新日期： 2025 年 3 月 9 日
本文為 jQuery 基本介紹系列文，第 1 篇：
- 如何使用jQuery CDN 建立互動網頁
- 初學者指南：掌握 jQuery DOM 操作技巧
- 初學者指南：深入了解 jQuery 選擇器
- 使用jQuery 刪除第一個子元素的實作教學
- 初學者指南：深入了解 jQuery 事件處理 👈進度
- 如何在jQuery 中使用事件監聽器addEventListener
- 了解jQuery 中$().each(function(){}) 與$.each() 的差異
- jQuery 與fetch 的非同步請求方法介紹
- 初學者指南：掌握 jQuery 動畫效果
- 初學者指南：深入了解 jQuery 中的 this 關鍵字
- 初學者指南：深入了解 jQuery .offset() 方法
jQuery 是一個廣受歡迎的 JavaScript 庫，提供了簡化 DOM 操作、動畫處理、事件處理等豐富的功能。
在網站開發中，事件 (Event) 是指用戶與頁面互動（例如點擊按鈕、輸入文本、移動滑鼠等）時觸發的行為。
透過 jQuery 的事件處理機制，我們能輕鬆地為網頁元素添加交互效果，提升用戶體驗。
本文將為初學者詳細介紹 jQuery 事件處理的基礎知識與常見用法，並透過實例講解如何有效地使用事件方法，讓你快速上手並應用在實際開發中。
什麼是 jQuery 事件處理？
事件處理 (Event Handling) 是指當某個事件發生時 (如點擊、滑鼠移動、鍵盤輸入等)，執行指定的 JavaScript 程式碼，以實現特定的互動效果。
例如，當用戶點擊按鈕時，顯示一個提示框，或在輸入框中輸入文字時，自動完成搜索建議。
jQuery 提供了簡單而強大的事件處理方法，讓開發者能夠輕鬆為 DOM 元素綁定和解除事件，並取得事件相關的資訊 (例如點擊位置、觸發元素等)。
事件處理的基本語法
在 jQuery 中，綁定事件的基本語法如下：
$(選擇器).事件類型(事件處理函數);例如，當用戶點擊 <button> 時顯示訊息，可以這樣寫：
<button id="myButton">點我</button>
<script>
$("#myButton").click(function() {
alert("按鈕被點擊了！");
});
</script>
常見的 jQuery 事件類型
滑鼠事件 (Mouse Events)
滑鼠事件與用戶滑鼠行為相關，常用的滑鼠事件如下：
// 滑鼠點擊
$("button").click(function() {
console.log("按鈕被點擊！");
});
// 滑鼠雙擊
$("button").dblclick(function() {
console.log("按鈕被雙擊！");
});
// 滑鼠移入與移出
$(".box").mouseenter(function() {
$(this).css("background-color", "yellow");
}).mouseleave(function() {
$(this).css("background-color", "");
});
// 滑鼠按下與鬆開
$(".box").mousedown(function() {
console.log("滑鼠按下");
}).mouseup(function() {
console.log("滑鼠鬆開");
});
鍵盤事件 (Keyboard Events)
鍵盤事件適合處理用戶在輸入框中的操作，例如按下某個按鍵：
// 當按鍵被按下
$(document).keydown(function(event) {
console.log("按下的按鍵是：" + event.key);
});
// 當按鍵被鬆開
$(document).keyup(function(event) {
console.log("鬆開的按鍵是：" + event.key);
});
// 輸入框中文字改變 (適用於表單)
$("input").on("input", function() {
console.log("輸入框內容變更為：" + $(this).val());
});
表單事件 (Form Events)
表單事件用於處理表單元素的交互，例如提交、重置等：
// 表單提交時
$("form").submit(function(event) {
event.preventDefault(); // 阻止預設提交行為
console.log("表單已提交！");
});
// 輸入框聚焦與失焦
$("input").focus(function() {
console.log("輸入框獲得焦點");
}).blur(function() {
console.log("輸入框失去焦點");
});
瀏覽器事件 (Browser Events)
瀏覽器事件主要與頁面或視窗行為相關，例如頁面加載、大小變化等：
// 網頁加載完成
$(document).ready(function() {
console.log("DOM 已加載完成！");
});
// 視窗大小變化
$(window).resize(function() {
console.log("視窗大小變更");
});
// 視窗滾動
$(window).scroll(function() {
console.log("頁面滾動中");
});
事件綁定方法
.on() 方法
.on() 是 jQuery 中最通用的事件綁定方法，可以用於綁定多種事件，甚至支持事件委派。
// 綁定點擊事件
$("#myButton").on("click", function() {
alert("點擊事件觸發！");
});
// 綁定多個事件
$("#myButton").on("mouseenter mouseleave", function() {
$(this).toggleClass("hover");
});
.off() 方法
.off() 用於解除已經綁定的事件，避免內存泄漏或不必要的事件觸發。
// 移除特定事件
$("#myButton").off("click");
.one() 方法
.one() 方法只會在事件首次觸發時執行一次，適合一些只需處理一次的場景。
$("#myButton").one("click", function() {
alert("這個事件只觸發一次！");
});
事件物件 (Event Object)
當事件觸發時，jQuery 會自動傳入一個事件物件 (event object)，它包含了當前事件的所有相關資訊，例如觸發的元素、滑鼠位置、鍵盤按鍵等。
$("button").click(function(event) {
console.log("事件觸發元素：" + event.target.tagName);
console.log("滑鼠位置：" + event.pageX + ", " + event.pageY);
});
事件委派 (Event Delegation)
事件委派是一種將事件處理器綁定到父元素上，而非具體子元素的方法。
當子元素觸發事件時，通過事件冒泡 (Event Bubbling) 的機制，父元素會接收到事件，進而觸發相應的處理函數。
這種方法的好處在於：
- 動態元素處理：即使是後來動態新增的元素，依然能觸發事件。
- 提高效能：只需為父元素綁定一次事件，避免為大量子元素重複綁定。
// 透過事件委派監聽所有子元素的點擊事件
$("#parent").on("click", ".child", function() {
alert("子元素被點擊！");
});
延伸閱讀：JavaScript 中 on 系列與 addEventListener 的差別
結語
jQuery 提供了靈活且強大的事件處理功能，讓開發者能輕鬆應對各種互動需求。
從基本的點擊、滑鼠移動，到複雜的事件委派與一次性事件處理，jQuery 都能夠簡化實現。
對於初學者而言，熟悉這些事件處理方法將大大提升開發效率，建議多多練習，並在實際專案中運用這些技巧，讓你的網頁變得更具活力和互動性。