我们先看一个关于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 = "#FFFFFF";    
}    
}    
﹤/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 = "#FFFFFF";    
}    
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 = "#FFFFFF";    
}    
var col = new tt(i);    
list_obj[i].onclick = col.clickFunc;    
}    
﹤/script﹥   
﹤/body﹥   
﹤/html﹥

摘自:http://www.cnblogs.com/angells/archive/2009/11/19/1606439.html

js闭包Demo的更多相关文章

  1. 让你分分钟学会 JS 闭包

    闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  2. js闭包vs Java内部类

    前言: 昨天写了一个关于Java内部的博客,在内部类的最后一点中谈到了Java闭包的概念,他是这样定义闭包的:闭包是一个可调用的对象,它记录了一些信息,这些信息来自创建它的作用域.结合Java的内部类 ...

  3. 简单详细讲解js闭包(看完不懂你砍我!!!)

    <javascript高级程序设计>中闭包的概念: 闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量 ...

  4. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  5. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  6. Three.js基本 Demo

    对于新手来说,几个简单的例子非常实用,偶然发现几个不错的Demo,分享给大家! Three.js基本 Demo 1.最基本的Hello World:http://stemkoski.github.io ...

  7. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  8. js闭包之初步理解( JavaScript closure)

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

  9. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

随机推荐

  1. SQL case

    case when Value='1' then 'True'  else 'False' end as 'Result'

  2. 概率论与数理统计图解.tex

    \documentclass[UTF8,a1paper,landscape]{ctexart} \usepackage{tikz} \usepackage{amsmath} \usepackage{a ...

  3. Confuser.crproj

    <?xml version="1.0" encoding="utf-8"?> <project baseDir="bin\Relea ...

  4. 解决在ScrollView中套用ListView显示不正常

    最近在设计Android程序时,因为需要在ScrollView中添加一个ListView列表来显示一些信息.刚开始并没有想太多,但添加进去后才发现ListView不论怎样定义都只能显示一行,显示效果很 ...

  5. Excel 自动更正

    当有复杂的字段需要重复填写怎么办呢,比如××银行卡号,××电话号码,××公司地址等.可以使用excel的"自动更正"功能解决. 1. Excel 2010的自动更正选项在哪里呢 2 ...

  6. Postman 发送http请求工具

    http://donglegend.com/2016/10/28/Postman/ Postman 发现一款发送Web API & HTTP 请求的工具,没错,就是Postman.推荐给大家, ...

  7. linux 用户创建、管理、权限分配

    (1)su与sudo su:通过su可以在用户之间切换,如果超级权限用户root向普通或虚拟用户切换不需要密码,什么是权力?这就是!而普通用户切换到其它任何用户都需要密码验证: sudo: sudo扮 ...

  8. android studio--百度定位集成001

    安卓现在的大趋势已经是普遍使用androidstudio(安装包[https://yunpan.cn/ckc54idj3JVJb  访问密码 664f])了.这个是集成的一个好的环境. 今天来搞个百度 ...

  9. 安装Yeoman,遇到的问题

    在安装Yeoman遇到了一些报错,具体的步骤就不多说了,直接上码,具体的两处报错的地方. 第一个,创建webapp,直接报权限的错误,这时才留意到在它之前还有一个错误. [root@iZ289zd8c ...

  10. [Android Pro] 完美解决隐藏Listview和RecyclerView去掉滚动条和滑动到边界阴影的方案

    reference to : http://blog.csdn.net/ming2316780/article/details/51578621 一.首先是Listview的属性设置 设置滑动到顶部和 ...