jQuery 事件處理器封裝：提取匿名函數為命名函數並保持 this 指向

原始代碼

$(".banner li").click(function() {
    var $li = $(this);
    var i = $li.text() - 1;
    // ... 輪播切換邏輯
});

封裝後代碼

// 定義命名函數
function handleBannerClick() {
    var $li = $(this); // this 仍指向觸發事件的 DOM 元素
    var i = $li.text() - 1;
    // ... 相同邏輯
}

// 綁定事件
$(".banner li").click(handleBannerClick); // 直接傳函數引用，不調用

原理解析

jQuery 事件綁定時，會將處理函數的 `this` 綁定為當前 DOM 元素。無論是匿名函數還是命名函數，只要通過 `.click(fn)` 綁定，`fn` 內部的 `this` 都是一致的。

進階：需要傳遞額外參數時

// 使用 .bind() 固定 this 並預置參數
$(".banner li").click(handleBannerClick.bind(null, extraParam));

// 或使用箭頭函數包裹（注意 this 指向變化）
$(".banner li").click(e => handleBannerClick.call(e.currentTarget, extraParam));

簡單場景直接傳命名函數最清晰。