1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=gb2312 />
5 <title>js</title>
6 <script>
7 //function语句在解析时会被提升，不管function语句放置在哪里，
8 //它都会被移动到所在作用域的顶层。
9 addEvent(window,'load',initAnchors);
10
11
12 function initAnchors(){
13 for(var i=1; i<=3; i++){
14 var anchor = $('anchor'+i);
15 registerListener(anchor,i); //函数中函数，也就是闭包，registerListener可以保存外部变量的值。
16 }
17 };
18 /*
19 把事件处理函数注册到一个独立的函数中。
20
21 现在click事件处理函数的外部作用域变成了registerListener()函数。
22
23 每次调用registerListener()函数时都会生成该函数的一个副本，
24 以维护正确的变量作用域。
25 */
26 function registerListener(anchor,i){
27 addEvent(anchor,'click',function(){
28 alert('my id is anchor'+i);
29 });
30 }
31 /*
32 因为i的值实际上是单击事件发生时才从作用域链中取得。
33 当单击事件必发生时，initAnchors()已经执行完毕（验证：在循环加入alert(i)后，打开网页会弹出三次框）。
34 此时i=4。所以alert会显示相同信息。
35
36 具体来说，当click事件处理函数被调用时，它会先在事件处理函数的内部作用域中查找i的值，
37 但click事件的匿名处理函数中没有定义i的值，所以它再到其外部作用域（initAnchors()函数）中查找。
38 而外部作用域中i=4。
39
40 function initAnchors(){
41 for(var i=1; i<=3; i++){
42 //alert(i);
43 var anchor = $('anchor'+i);
44 addEvent(anchor,'click',function(){
45 alert('my id is anchor'+i);
46 });
47 }
48 };
49
50 */
51 function addEvent( node, type, listener ) {
52 if (node.addEventListener) {
53 // W3C method
54 node.addEventListener( type, listener, false );
55 return true;
56 } else if(node.attachEvent) {
57 // MSIE method
58 //使用attachEvent()注册的回调函数没有Event参数，需要读取Window对象的event属性
59 //使用attachEvent()作为全局函数调用。而不是事件发生其上的文档元素的方法来调用
60 //也就是说attachEvent()注册的回调函数执行时，this指向window对象，而不是事件目标元素。
61 //下面修正这些问题
62 node['e'+type+listener] = listener;
63 node[type+listener] = function(){
64 node['e'+type+listener]( window.event );
65 }
66
67 //IE事件模型不支持事件捕获，所以需要两个参数
68 node.attachEvent( 'on'+type, node[type+listener] );
69
70
71 return true;
72 }
73
74 // Didn't have either so return false
75 return false;
76 };
77
78 function $() {
79 var elements = new Array();
80
81 // Find all the elements supplied as arguments
82 for (var i = 0; i < arguments.length; i++) {
83 var element = arguments[i];
84
85 // If the argument is a string assume it's an id
86 if (typeof element == 'string') {
87 element = document.getElementById(element);
88 }
89
90 // If only one argument was supplied, return the element immediately
91 if (arguments.length == 1) {
92 return element;
93 }
94
95 // Otherwise add it to the array
96 elements.push(element);
97 }
98
99 // Return the array of multiple requested elements
100 return elements;
101 };
102 </script>
103 </head>
104
105 <body>
106 <ul>
107 <li><a href="#" id="anchor1">Anchor 1</a></li>
108 <li><a href="#" id="anchor2">Anchor 2</a></li>
109 <li><a href="#" id="anchor3">Anchor 3</a></li>
110 </ul>
111
112 </body>
113 </html>
浙公网安备 33010602011771号