Javascript研究心得总结
2010-09-14 13:42:10 来源：WEB开发网最后介绍一个奇怪现象：下面的代码，为什么鼠标移动到li上，title总是6，而不是我们所预想的数字呢？看你能不能根据以上的知识，解释这种现象的原因。提示：变量查找机制。
<html>
<head>
<title>循环内的闭包 应该谨慎</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#eee";
document.title=i
};
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#fff";
}
}
</script>
</body>
</html>
为什么上面的代码改成下面的就好了呢？
<html>
<head>
<title>循环内的闭包 应该谨慎</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
for (var i = 0; i <= list_obj.length; i++) {
(function(i){
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#eee";
document.title=i
};
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#fff";
}
})(i);
}
</script>
</body>
</html>
出处：http://kaima.cnblogs.com
Tags：Javascript 研究 心得
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript研究心得总结”更多相关内容
中查找“Javascript研究心得总结”更多相关内容更多精彩
赞助商链接
