jQuery 提供四種事件綁定方式：bind、live、delegate、on，對應解綁方法分別為 unbind、die、undelegate、off。理解它們的異同，是寫出高效、可維護代碼的關鍵。
// 源碼實現
bind: function(types, data, fn) {
return this.on(types, null, data, fn);
}
// 使用示例
$('#myol li').bind('click', getHtml);
特點：逐個為匹配元素綁定監聽器，一個元素一個綁定。適用於頁面載入後不再動態新增的元素。若列表後續動態插入 <li>，新元素不會自動生效，需重新綁定。
簡寫形式如 click(fn)、change(fn) 等效於 bind。
live: function(types, data, fn) {
jQuery(this.context).on(types, this.selector, data, fn);
return this;
}
機制：將監聽器綁定在 this.context（通常是 document）上，利用事件冒泡機制捕獲後代元素事件。動態新增的元素自動生效，無需重綁。
缺點：所有事件冒泡至 document 才處理，層級深、頻率高時性能損耗明顯；且不支持鏈式調用上下文限制。
delegate: function(selector, types, data, fn) {
return this.on(types, selector, data, fn);
}
// 使用示例
$('#myol').delegate('li', 'click', getHtml);
優勢：監聽器綁定在調用元素（如 #myol）而非 document，縮短冒泡路徑；selector 參數精準指定目標元素，語義清晰。
// 簽名 on(type, [selector], [data], fn)
selector：等效 bind，直接綁定目標元素selector：等效 delegate，事件委託模式核心地位：bind、live、delegate 內部均調用 on 實現。jQuery 1.7+ 官方建議統一使用 on，減少內部調用開銷，代碼更統一。
| 場景 | 推薦寫法 | 說明 |
|---|---|---|
| 靜態元素，無動態新增 | $('#el').on('click', fn) | 直接綁定，最簡潔 |
| 動態元素，容器固定 | $('#container').on('click', '.child', fn) | 事件委託，就近綁定 |
| 全局文檔級委託（不推薦） | $(document).on('click', '.anywhere', fn) | 僅作為最後手段 |
掌握四種綁定方式的演進脈絡：bind 直綁 → live 文檔委託 → delegate 就近委託 → on 統一規範。現代項目請直接使用 on，根據是否傳遞選擇器決定直綁或委託，兼顧性能與維護性。
