1 // 这个代码是错误的，因为变量i从来就没背locked住
2 // 相反，当循环执行以后，我们在点击的时候i才获得数值
3 // 因为这个时候i操真正获得值
4 // 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）
5
6 var elems = document.getElementsByTagName('a');
7
8 for (var i = 0; i < elems.length; i++) {
9
10 elems[i].addEventListener('click', function (e) {
11 e.preventDefault();
12 alert('I am link #' + i);
13 }, 'false');
14
15 }
16
17 // 这个是可以用的，因为他在自执行函数表达式闭包内部
18 // i的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数（例如10）
19 // 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了
20 // 所以当点击连接的时候，结果是正确的
21
22 var elems = document.getElementsByTagName('a');
23
24 for (var i = 0; i < elems.length; i++) {
25
26 (function (lockedInIndex) {
27
28 elems[i].addEventListener('click', function (e) {
29 e.preventDefault();
30 alert('I am link #' + lockedInIndex);
31 }, 'false');
32
33 })(i);
34
35 }
36
37 // 你也可以像下面这样应用，在处理函数那里使用自执行函数表达式
38 // 而不是在addEventListener外部
39 // 但是相对来说，上面的代码更具可读性
40
41 var elems = document.getElementsByTagName('a');
42
43 for (var i = 0; i < elems.length; i++) {
44
45 elems[i].addEventListener('click', (function (lockedInIndex) {
46 return function (e) {
47 e.preventDefault();
48 alert('I am link #' + lockedInIndex);
49 };
50 })(i), 'false');
51
52 }
View Code
