jQuery 事件綁定：.click() 與 .bind() 的核心差異與最佳實踐

問題背景

在早期 jQuery 開發中，開發者常見兩種綁定點擊事件的寫法：

// 寫法一：簡便方法
$("div p").click(function(){ alert("sss"); });

// 寫法二：bind 方法
$("div p").bind("click", function(){ alert("sss"); });

雖然兩者在靜態元素上表現一致，但在動態元素處理、解綁操作、效能與維護性上存在本質差異。

核心差異深度解析

1. 解綁操作的便利性

• .click()：屬於「簡便方法」，內部調用 .on()。解綁時需指定完整的命名空間或函數引用，若使用匿名函數則無法精確解綁，只能暴力 $("div p").off("click") 移除所有點擊事件。
• .bind()：支援直接針對特定事件類型解綁，$("div p").unbind("click") 即可精確移除該綁定，不影響其他事件類型。

2. 動態元素事件委托能力

這是兩者最大的實戰差異：

• .click() / .bind()：只能綁定當前存在的 DOM 元素。若後續透過 AJAX 載入新內容、動態建立 <p> 元素，這些新元素不會自動繼承事件。
• .on() (推薦現代寫法)：支援事件委托，綁定至父層或 document，透過選擇器過濾目標元素：

// 現代推薦寫法：事件委托
$(document).on('click', 'div p', function(event){
    alert("動態新增的 p 元素也能觸發！");
});

3. 效能與記憶體考量

版本演進與最佳實踐

jQuery 版本時間軸

• 1.7 之前：.bind()、.live()、.delegate() 並存
• 1.7+：引入 .on() 統一所有事件綁定 API
• 3.0+：.bind()、.delegate()、.live() 正式棄用（雖仍保留相容）

現代專案統一規範

// ✅ 推薦：靜態元素直接綁定
$("#submitBtn").on("click", handleSubmit);

// ✅ 推薦：動態元素使用委托
$("#listContainer").on("click", ".item", handleItemClick);

// ❌ 不推薦：舊版 API
$("#submitBtn").bind("click", handleSubmit);
$("#listContainer").delegate(".item", "click", handleItemClick);

實戰案例：動態載入清單項目

<ul id="todoList"></ul>
<button id="addItem">新增項目</button>

<script>
// 正確：委托給父容器
$("#todoList").on("click", "li", function(){
    $(this).toggleClass("done");
});

// 錯誤：直接綁定 li (新增的 li 不會生效)
// $("#todoList li").click(function(){...});

$("#addItem").click(function(){
    $("#todoList").append("<li>新任務 " + Date.now() + "</li>");
});
</script>

總結

1. 棄用 .bind()/.click()：專案統一遷移至 .on()
2. 靜態元素：直接 $(selector).on(event, handler)
3. 動態元素：務必使用事件委托 $(parent).on(event, childSelector, handler)
4. 解綁：使用 .off(event, selector, handler) 精確控制

掌握事件委托機制，是處理現代前端動態互動介面的關鍵技能。