如何在 jQuery 中使用事件監聽器 addEventListener

更新日期： 2024 年 11 月 6 日

在 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);

各參數的含義如下：

1. event：事件名稱（如 'click'、'mouseover' 等），可以是單個事件名稱，也可以用空格分隔多個事件名稱來同時監聽多個事件，例如 click mouseover。
2. childSelector（可選）：指定事件委派的子元素選擇器。若為空，則直接監聽 selector 本身上的事件。這在動態添加的元素上非常有用。
3. data（可選）：傳遞給事件處理函數的數據，該數據可以在事件處理函數中通過 event.data 獲取。
4. 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() 等快捷方法被廣泛使用。

然而，這些方法已被官方標記為 棄用，主要原因如下：

1. 缺乏靈活性：這些方法只能監聽單一事件，無法處理多個事件或進行事件委派，對於動態生成的元素就顯得不夠靈活。
2. 事件委派限制：.on() 支援事件委派，允許對動態添加的元素生效，而 .click() 等方法無法做到這一點。
3. 統一性和可讀性：.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 結構

<div id="container">
    <button class="dynamicButton">按鈕 1</button>
    <button class="dynamicButton">按鈕 2</button>
</div>
<button id="addButton">新增按鈕</button>

JavaScript 代碼

// 使用 .on() 監聽 #container 裡的 .dynamicButton 的 click 事件
$('#container').on('click', '.dynamicButton', function() {
    alert($(this).text() + ' 被點擊！');
});

// 動態添加新的 .dynamicButton 按鈕
$('#addButton').on('click', function() {
    $('#container').append('<button class="dynamicButton">新增的按鈕</button>');
});

在這裡，我們將 .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 事件，特別是在動態內容豐富的應用中。