我们先看一个关于Javascript利用循环绑定事件的例子：
例如：一个不确定长度的列表，在鼠标经过某一条的时候改变背景。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</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 = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#000000";
}
}
</script>
</body>
</html>
这个例子循环为一组对象绑定事件处理函数。
但是，如果我们在这个基础上增加一些需求。比如在点击某一条记录的时候弹出这是第几条记录？
肯能你会理所当然的这么写：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</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 = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#000000";
}
list_obj[i].onclick = function() {
alert("这是第" + i + "记录");
}
}
</script>
</body>
</html>
测试一下你会发现alert出来的都是：这是第6记录
其实这里for循环已将整个列表循环了一遍，并执行了i++，所以这里i变成了6，
有什么好的办法解决这个问题吗？
那就是闭包了，个人认为闭包是js中最难捉摸的地方之一，
看看什么是闭包：
闭包时是指内层的函数可以引用存在与包围他的函数内的变量，即使外层的函数的执行已经终止。
可以查阅：http://www.css88.com/article.asp?id=469
这个例子中我们可以这样做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</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">
function tt(nob) {
this.clickFunc = function() {
alert("这是第" + (nob + 1) + "记录");
}
}
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 = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#000000";
}
var col = new tt(i);
list_obj[i].onclick = col.clickFunc;
}
</script>
</body>
</html>
转自：
http://blog.zol.com.cn/844/article_843149.html
分享到：
相关推荐
javascript 闭包实例下载
用实例展示闭包的用法，其中包含一些动画效果
本文是通过实例来帮助大家深刻理解js闭包，是篇非常不错的文章，这里推荐给大家，有需要的小伙伴可以参考下
NULL 博文链接：https://czj4451.iteye.com/blog/1988315
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在，本文通过代码实例给大家介绍javascript闭包，对javascipt闭包相关知识感兴趣的朋友一起学习吧
主要介绍JavaScript闭包知识，包括闭包的基本概念，闭包的用途等相关知识，介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
通俗解释 Javascript中所有的函数都是一个闭包。不过一般来说，嵌套的function产生的闭包更为强大，也是大部分时候我们所说的“闭包”。看如下代码： 代码如下: [removed] <!– //外层函数a function a(){ //...
众所周知，JavaScript没有块级作用域，只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的，而在一个函数内部任何位置定义的变量，在该函数内部任何地方都可见
介绍了javascript闭包的高级使用方法实例，有需要的朋友可以参考一下
主要介绍了JS闭包,结合一个经典实例较为详细的分析了javascript闭包的原理及使用方法,需要的朋友可以参考下
本文实例讲述了js闭包用法。分享给大家供大家参考，具体如下： 引言 在公司中需要写一个js脚本来进行网站的统计，实现类似百度统计或者站长统计的功能，在实现的过程中自己感觉写的代码还是可以的，因为之前的js代码...
本文通过实例代码给大家详细介绍了js闭包的几种常见形式，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
下面是一个简单的使用全局变量的闭包实例： 代码如下: var sWord=”Hello,Welcome to web前端开发工程师的博客，请多多指教。” function disWord(){ alert(sWord); } disWord(); 解析：脚本载入到内存的...
主要介绍了javascript实现的闭包简单实现方法,涉及javascript闭包的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了JS闭包用法,结合具体实例形式分析了javascript闭包的原理、执行步骤与相关操作技巧,需要的朋友可以参考下