Re: [問題] JQuery事件的設定

[Hevak (Arthow Eshes)]

 引述《lueichun (no anonymous)》之銘言：
: 我在stackoverflow上看到一個範例：
: http://bit.ly/2nTLOgD
: 裡面有這麼一段code：
:
: function generate_handler( j ) {
:     return function(event) {
:         switchBanners(j, true);
:     };
: }
: for(var i = 1; i <= totalBanners; i++){
:    $('#slider-' + i).click( generate_handler( i ) );
: }

$('xxx').click(這邊要放一個function的參照);



當 xxx 被點擊時才會執行 function，所以一般你最常看到的型式應該是這樣:

$('xxx').click(function (event) {
    // do something
});

現場宣告一個匿名 function 其實就是現場宣告一個 function 的參照進去。

上面那個範例可以改寫成這樣：

function f(event) {
    // do something
}

$('xxx').click(f);

注意是 f 不是 f()，
f 是對 f 這個名稱的 function 的參照，
f() 是執行 f 這個 function。
.click(f) 是把 f 這個 function 的參照作為參數傳給 .click，
所以原本的 $('xxx') 被點擊時會執行 f 這個 function。


那你原先舉的範例的 return function 在做什麼？

其實他運作起來會像這樣：

(下面是複製你提供的範例程式碼，方便解說不用跳來跳去而已)

for(var i = 1; i <= totalBanners; i++){
   $('#slider-' + i).click( generate_handler( i ) );
}

還記得只要function名後面有括號，就會直接先呼叫那個function嗎？

執行到 .click( generate_handler(i) ) 的時候，

跟數學一樣，括號優先由內解到外，

generate_handler(i) 會先被執行，

至於呼叫 generate_handler(i) 會獲得什麼？

function generate_handler( j ) {
    return function(event) {
        switchBanners(j, true);
    };
}

這邊運用閉包的概念產生一個全新的匿名 function 參照，

換句話說呼叫 generate_handler(1) 會回傳一個

function (event) {
    switchBanners(1, true);
}

所以如果迴圈內當下 i === 2，那最後中間那個 .click 那行實際做的事情會變成：

$('#slider-' + 2).click( function (event) {
    switchBanners(2, true);
});

這樣可以理解嗎？

--
●  89 m  9/14 david21911     ◇ 你真是AV神人!
 鴻雁往返  (R)回信 (x)站內轉寄 (y)回群組信 (d/D)刪信 (^P)寄發新信   (←/q)離開 
                                 稱號：AV神人
              耐力+30, 魔法+30, 意志+30, 野生動物訓練成功機率+50%
             生命-40, 智力-40, 防禦-10, 保護-25, 女性NPC好感度變化
[請問] 獲得這種稱號該如何處理...                 http://www.plurk.com/Arsho_Enn

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.168.73.112
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1490452690.A.8BD.html
※ 編輯: Hevak (1.168.73.112), 03/25/2017 22:39:39
推 kir7741: 借串問一下('#slider-' +i)是什麼意思，程式新手沒看過這
→ kir7741: 種寫法，謝謝
推 lueichun: 了解了 感謝
→ Hevak: '#slider-' + i 是字串串接，以上面 for 迴圈當下是 i 為 2
→ Hevak: 的狀況下，'#slider-' + 2 的 數字2 會被自動轉型成 字串2
→ Hevak: ，再跟 '#slider' 接起來，變成字串 '#slider-2'
→ Hevak: 至於 $('#slider-2') 就是把 '#slider-2' 作為參數傳給 $
→ Hevak: 這個 function，假設這個 $ 是 jQuery，效果就是回傳選取
→ Hevak: 了 id 為 #slider-2 的 DOM 元素的 jQuery 物件
→ Hevak: 所以 $('#slider-2').click(中略) 是對 id 為 slider-2 的
→ Hevak: 元素綁定 click 事件的處理 function
→ Hevak: 應該說，如果 + 的兩邊都是字串，就會把兩個字串串接起來。
→ Hevak: 如果只有其中一邊是字串，
→ Hevak: 會自動把另一邊轉成字串(toString)再把兩個字串串接起來。
推 kir7741: 再給推，謝謝原po仔細解說
推 EPGo: 推