我们先看一个关于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 闭包是一种高级编程概念，它在JavaScript中扮演着至关重要的角色，特别是在函数式编程和模块化设计中。闭包本质上是函数和其能够访问...通过学习这些实例，你将能够更好地掌握JavaScript闭包这一核心概念。
JavaScript中的闭包是一种高级特性，它允许函数访问和操作其自身范围内的变量，即使在其外部定义的函数已经执行完毕。这种特性使得闭包在管理作用域、数据隐藏和内存持久化方面具有重要作用。 首先，我们要了解函数...
JavaScript中的闭包是一种重要的编程概念，它涉及到函数、作用域和变量持久化。闭包本质上是函数能够记住并访问其词法作用域内的变量，即使该函数已经执行完毕且其外部作用域不再存在。这种特性使得闭包成为...
- 常见的一个闭包实例是计数器，例如： ```javascript function createCounter() { let count = 0; return function() { count++; console.log(count); }; } const counter = createCounter(); counter()...
JavaScript 闭包是一种高级编程概念，它在JavaScript中扮演着重要的角色，特别是...通过深入学习和实践这些内容，你将能够更好地理解和掌握JavaScript闭包的精髓，并将其应用于实际项目中，提高代码的质量和可维护性。
JavaScript闭包是编程中一种非常重要的概念，它涉及到函数、作用域、变量持久化等多个方面。闭包的本质是在一个函数内部定义的函数可以访问并操作其外部函数的变量，即使外部函数已经执行完毕，这些变量依然可以被...
JavaScript 闭包是一种强大的编程工具，常常被用来解决特定的问题和优化代码结构。在JavaScript中，闭包是指一个函数能够访问并操作其定义时的作用域内的变量，即使该函数在其外部作用域被调用。以下将详细介绍两个...
JavaScript中的闭包是一种强大的特性，它允许内部函数访问并操作其外部函数的变量，即使外部函数已经执行完毕。闭包的出现与JavaScript的函数作用域密切相关，因为在这门语言中，只有函数作用域，没有块级作用域。这...
闭包是JavaScript中的一个重要概念，它是指有权访问另一个函数作用域中的变量的函数。在JavaScript编程中，闭包的应用非常广泛，它不仅可以帮助我们创建私有变量，还能为模块化编程提供强大的支持。 在闭包的定义中...
JavaScript 闭包是一种强大的特性，它允许函数访问和操作其外部作用域中的变量，即使在外部函数执行完毕后，这些变量仍然保持活动状态。在高级使用中，闭包可以用于实现模块化、数据封装、方法扩展和重载、以及创建...
JavaScript中的闭包是一种重要的编程概念，它涉及到函数、作用域和内存管理等多个方面。闭包的本质是函数能够访问并保留其定义时的作用域中的变量，即使该函数在其他作用域中被调用。这意味着，当函数执行时，它可以...
本文实例讲述了js闭包用法。分享给大家供大家参考，具体如下： 引言 在公司中需要写一个js脚本来进行网站的统计，实现类似百度统计或者站长统计的功能，在实现的过程中自己感觉写的代码还是可以的，因为之前的js代码...
"JavaScript经典实例"这个主题涵盖了一系列经过实践验证的代码片段和实用技巧，旨在帮助开发者深化对JavaScript的理解并提升技能。 描述中提到“内容丰富”，意味着这个压缩包可能包含了各种类型的JavaScript应用...
JavaScript中的闭包是一种强大的特性，它允许函数访问和操作外部作用域中的变量，...希望本文的实例解析能帮助你更好地掌握JavaScript中的闭包。如果你有任何问题或需要进一步的解释，请随时提问，我会尽力提供帮助。
7. **闭包**：闭包是JavaScript中一个高级特性，允许函数访问和操作其外部作用域的变量，即使在其外部作用域已经结束之后。 8. **定时器和延迟操作**：setTimeout和setInterval用于在特定时间后执行函数，理解它们...