<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312 />
<title>js</title>
<script>
//function语句在解析时会被提升，不管function语句放置在哪里，
//它都会被移动到所在作用域的顶层。
addEvent(window,'load',initAnchors); function initAnchors(){
for(var i=1; i<=3; i++){
var anchor = $('anchor'+i);
registerListener(anchor,i); //函数中函数，也就是闭包，registerListener可以保存外部变量的值。
}
};
/*
把事件处理函数注册到一个独立的函数中。 现在click事件处理函数的外部作用域变成了registerListener()函数。 每次调用registerListener()函数时都会生成该函数的一个副本，
以维护正确的变量作用域。
*/
function registerListener(anchor,i){
addEvent(anchor,'click',function(){
alert('my id is anchor'+i);
});
}
/*
因为i的值实际上是单击事件发生时才从作用域链中取得。
当单击事件必发生时，initAnchors()已经执行完毕（验证：在循环加入alert(i)后，打开网页会弹出三次框）。
此时i=4。所以alert会显示相同信息。 具体来说，当click事件处理函数被调用时，它会先在事件处理函数的内部作用域中查找i的值，
但click事件的匿名处理函数中没有定义i的值，所以它再到其外部作用域（initAnchors()函数）中查找。
而外部作用域中i=4。 function initAnchors(){
for(var i=1; i<=3; i++){
//alert(i);
var anchor = $('anchor'+i);
addEvent(anchor,'click',function(){
alert('my id is anchor'+i);
});
}
}; */
function addEvent( node, type, listener ) {
if (node.addEventListener) {
// W3C method
node.addEventListener( type, listener, false );
return true;
} else if(node.attachEvent) {
// MSIE method
//使用attachEvent()注册的回调函数没有Event参数，需要读取Window对象的event属性
//使用attachEvent()作为全局函数调用。而不是事件发生其上的文档元素的方法来调用
//也就是说attachEvent()注册的回调函数执行时，this指向window对象，而不是事件目标元素。
//下面修正这些问题
node['e'+type+listener] = listener;
node[type+listener] = function(){
node['e'+type+listener]( window.event );
} //IE事件模型不支持事件捕获，所以需要两个参数
node.attachEvent( 'on'+type, node[type+listener] ); return true;
} // Didn't have either so return false
return false;
}; function $() {
var elements = new Array(); // Find all the elements supplied as arguments
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i]; // If the argument is a string assume it's an id
if (typeof element == 'string') {
element = document.getElementById(element);
} // If only one argument was supplied, return the element immediately
if (arguments.length == 1) {
return element;
} // Otherwise add it to the array
elements.push(element);
} // Return the array of multiple requested elements
return elements;
};
</script>
</head> <body>
<ul>
<li><a href="#" id="anchor1">Anchor 1</a></li>
<li><a href="#" id="anchor2">Anchor 2</a></li>
<li><a href="#" id="anchor3">Anchor 3</a></li>
</ul> </body>
</html>