作者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/cn.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