代码如下，不是很明白下面红颜色的代码(我认为alert(i)会根据点击不同的城市名输出不同的0、1、2三个不同的数字，为什么这里一直输出的是3呢），求给点思路。
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<script>
varcitys=document.getElementsByTagName("li");
for(vari=0;i<citys.length;i++){
citys[i].onclick=function(){
alert(this.innerHTML);//输出当前城市名（我想要的结果）
alert(i);//一直输出3（这里有困惑）；
}
}
</script>
</body>
------解决思路----------------------
添加事件时并没有执行方法内函数体，事件添加完毕时i已经变为3，点击时执行函数体弹窗当然会显示3
------解决思路----------------------
点击事件写在循环外面就ok
------解决思路----------------------
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
<script>
varcitys=document.getElementsByTagName("li");
for(vari=0;i<citys.length;i++){
/*
citys[i].onclick=function(){
alert(this.innerHTML);//输出当前城市名（我想要的结果）
alert(i);//一直输出3（这里有困惑）；
}
*/
citys[i].onclick=function(){
varindex=i;
returnfunction(){
alert(this.innerHTML);//输出当前城市名（我想要的结果）
alert(index);
}
}();
/*
因为你用到了闭包，你给三个<li>注册事件处理程序时，
使用的是同一个局部变量（for循环中的i），即三个事件处理程序共享局部变量i；
for循环执行完毕，i是没有被销毁掉的。
现在，通过function(){。。。}()立即执行的函数给每个事件处理程序定义一个局部变量index
*/}
</script>
</body>
</html>