FacebookLinkedInTweet更新日期： 2025 年 3 月 9 日
本文為 jQuery 基本介紹系列文，第 6 篇：
如何使用jQuery CDN 建立互動網頁
初學者指南：掌握 jQuery DOM 操作技巧
初學者指南：深入了解 jQuery 選擇器
使用jQuery 刪除第一個子元素的實作教學
初學者指南：深入了解 jQuery 事件處理
如何在jQuery 中使用事件監聽器addEventListener 👈進度
了解jQuery 中$().each(function(){}) 與$.each() 的差異
jQuery 與fetch 的非同步請求方法介紹
初學者指南：掌握 jQuery 動畫效果
初學者指南：深入了解 jQuery 中的 this 關鍵字
初學者指南：深入了解 jQuery .offset() 方法
在 JavaScript 開發中，監聽事件是實現動態互動的重要環節。
jQuery 提供了非常方便的 .on() 方法來替代原生的 addEventListener，用於監聽元素上的各種事件。
本文將介紹如何使用 .on() 方法及其各參數，並解釋為什麼 .click() 等直接事件方法已被棄用，以及 .on() 的優勢。
介紹 jQuery 的 .on() 方法
.on() 是 jQuery 中的主要事件綁定方法，用於監聽和處理 DOM 元素上的各種事件，包括 click、mouseover、keypress 等常見事件。
相比於 .click()、.mouseover() 等方法，.on() 提供了更高的靈活性，可以一次性監聽多個事件、代理事件、動態處理新生成的元素等，因此逐漸成為 jQuery 綁定事件的首選方法。
基本語法
.on() 方法的基本語法如下：
$(selector).on(event, [childSelector], [data], function);
各參數的含義如下：
event：事件名稱（如 'click'、'mouseover' 等），可以是單個事件名稱，也可以用空格分隔多個事件名稱來同時監聽多個事件，例如 click mouseover。
childSelector（可選）：指定事件委派的子元素選擇器。若為空，則直接監聽 selector 本身上的事件。這在動態添加的元素上非常有用。
data（可選）：傳遞給事件處理函數的數據，該數據可以在事件處理函數中通過 event.data 獲取。
function：事件處理函數，當指定的事件發生時，將執行該函數。此函數可接收 event 物件，用於獲取事件相關資訊。
使用範例
假設我們要在按鈕被點擊時顯示一段訊息，可以這樣寫：
$('#myButton').on('click', function(event) {
alert('按鈕已被點擊！');
});
這段代碼表示在 #myButton 被點擊時，執行匿名函數並顯示一個彈窗提示。
使用 .on() 方法監聽多個事件
若要同時監聽多個事件，可以將事件名稱用空格隔開，例如：
$('#myElement').on('mouseenter mouseleave', function(event) {
if (event.type === 'mouseenter') {
$(this).css('background-color', 'lightblue');
} else {
$(this).css('background-color', '');
}
});
這段代碼會在 #myElement 元素上同時監聽 mouseenter 和 mouseleave 事件，並根據事件類型來改變背景顏色。
為什麼 .click() 等事件方法被棄用？
在早期的 jQuery 版本中，像 .click()、.mouseover()、.dblclick() 等快捷方法被廣泛使用。
然而，這些方法已被官方標記為 棄用，主要原因如下：
缺乏靈活性：這些方法只能監聽單一事件，無法處理多個事件或進行事件委派，對於動態生成的元素就顯得不夠靈活。
事件委派限制：.on() 支援事件委派，允許對動態添加的元素生效，而 .click() 等方法無法做到這一點。
統一性和可讀性：.on() 作為通用事件處理方法，可以涵蓋所有情況，減少記憶和學習的成本。
因此，.click() 等方法逐步被棄用，建議使用 .on() 方法來取代。
延伸閱讀：JavaScript 事件委派（Event Delegation）入門指南：給新手的介紹
.on() 方法各參數的詳細說明
event 參數
event 參數定義了需要監聽的事件類型，通常為事件名稱字串（如 'click'、'mouseover' 等）。
event 參數可以是一個事件名稱，也可以用空格隔開，指定多個事件類型。
// 同時監聽 click 和 mouseover 事件
$('#element').on('click mouseover', function() {
console.log('事件觸發！');
});
childSelector 參數
childSelector 是可選參數，用於事件委派，即將事件綁定到未來可能動態添加的子元素上。
這在處理 SPA（單頁應用）或動態生成的元素時特別有用。
例如，當新添加的元素也需要監聽事件時，使用事件委派可以避免每次都手動綁定事件。
// 為未來新增的 `.dynamicButton` 元素添加 click 事件
$('#parentContainer').on('click', '.dynamicButton', function() {
alert('動態按鈕被點擊！');
});
在這裡，我們將點擊事件綁定到 #parentContainer，而不是 .dynamicButton。
因此，即使在 #parentContainer 中動態添加新 .dynamicButton，事件處理器依然會生效。
data 參數
data 參數允許我們將額外的數據，傳遞到事件處理器中。
這些數據可以在事件觸發時通過 event.data 訪問，為我們提供了靈活的數據傳遞方式。
$('#element').on('click', { message: '按鈕已被點擊！' }, function(event) {
alert(event.data.message);
});
在這段代碼中，我們傳遞了一個 message 值到事件處理器中，然後在事件觸發時顯示該訊息。
function 參數
function 參數為事件處理函數，它會在指定事件觸發時執行。
事件處理函數可以接受 event 物件，並根據該物件提供的詳細信息進行不同的處理。
$('#myButton').on('click', function(event) {
console.log('事件類型：' + event.type); // 輸出事件類型
console.log('事件目標：' + event.target); // 輸出觸發事件的目標
});
在這裡，我們可以通過 event 物件來獲取觸發事件的元素及其他相關資料。
使用 .on() 的實際範例
以下是一個綜合範例，演示了如何使用 .on() 方法來監聽 click 事件並進行事件委派。
HTML 結構
JavaScript 代碼
// 使用 .on() 監聽 #container 裡的 .dynamicButton 的 click 事件
$('#container').on('click', '.dynamicButton', function() {
alert($(this).text() + ' 被點擊！');
});
// 動態添加新的 .dynamicButton 按鈕
$('#addButton').on('click', function() {
$('#container').append('');
});
在這裡，我們將 .dynamicButton 的點擊事件委派給 #container，這樣即使 #container 中的 .dynamicButton 按鈕是動態生成的，事件處理器依然會生效。
此外，通過點擊 #addButton 可以動態地往 #container 添加新的 .dynamicButton 按鈕，並且新按鈕的點擊事件仍然會觸發。
常見問題：.on() 方法中的 event 參數和事件處理函數中的 event 物件容易混淆
在使用 .on() 方法時，event 參數和事件處理函數中的 event 物件容易讓人混淆，因為它們在語法上都是 event，但用途卻截然不同。
.on() 方法中的 event 參數 是用來指定要監聽的事件類型（例如 'click'、'mouseover'）。它是一個字串，標識需要監聽的特定事件。
事件處理函數中的 event 物件 是當事件觸發時傳遞的物件，它包含了有關該事件的詳細信息，例如觸發事件的元素、事件類型、座標位置等。
範例說明：
$('#element').on('click', function(event) {
console.log('監聽的事件為：click');
console.log('事件物件的目標為：', event.target);
});
在上例中：
.on('click', ...) 中的 'click' 是 event 參數，表示我們正在監聽 click 事件。
事件處理函數的 event 物件則包含事件發生的相關資訊，例如觸發事件的目標元素 event.target。
總結來說，.on() 的 event 參數是一個設定項目，用來指定要監聽的事件，而事件處理函數的 event 物件則是用來描述觸發的事件本身的詳細資訊。 理解這一點有助於避免混淆，正確使用事件處理函數。
結論
使用 jQuery 的 .on() 方法來綁定事件不僅簡潔，而且非常靈活。
.on() 支援多事件綁定、事件委派、數據傳遞等多種功能，比 .click() 等快捷方法更具可擴展性和一致性。
通過熟練使用 .on() 方法，開發者可以更有效率地管理 DOM 事件，特別是在動態內容豐富的應用中。