作者Hevak (Arthow Eshes)
看板Web_Design
標題Re: [問題] JQuery事件的設定
時間Sat Mar 25 22:38:07 2017
引述《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://webptt.com/m.aspx?n=bbs/Web_Design/M.1490452690.A.8BD.html
※ 編輯: Hevak (1.168.73.112), 03/25/2017 22:39:39
1F：推 kir7741: 借串問一下('#slider-' +i)是什麼意思，程式新手沒看過這 03/26 09:56
2F：→ kir7741: 種寫法，謝謝 03/26 09:56
3F：推 lueichun: 了解了 感謝 03/26 11:23
4F：→ Hevak: '#slider-' + i 是字串串接，以上面 for 迴圈當下是 i 為 2 03/26 12:09
5F：→ Hevak: 的狀況下，'#slider-' + 2 的 數字2 會被自動轉型成 字串2 03/26 12:09
6F：→ Hevak: ，再跟 '#slider' 接起來，變成字串 '#slider-2' 03/26 12:09
8F：→ Hevak: 這個 function，假設這個 $ 是 jQuery，效果就是回傳選取 03/26 12:10
9F：→ Hevak: 了 id 為 #slider-2 的 DOM 元素的 jQuery 物件 03/26 12:10
10F：→ Hevak: 所以 $('#slider-2').click(中略) 是對 id 為 slider-2 的 03/26 12:11
11F：→ Hevak: 元素綁定 click 事件的處理 function 03/26 12:11
12F：→ Hevak: 應該說，如果 + 的兩邊都是字串，就會把兩個字串串接起來。 03/26 12:26
13F：→ Hevak: 如果只有其中一邊是字串， 03/26 12:26
14F：→ Hevak: 會自動把另一邊轉成字串(toString)再把兩個字串串接起來。 03/26 12:26
15F：推 kir7741: 再給推，謝謝原po仔細解說 03/26 13:00
16F：推 EPGo: 推 03/26 19:33