我们先看一个关于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. lua学习例子

    extern "C"{ #include <lua.h> #include <lauxlib.h> #include <lualib.h> } ...

  2. Java数据结构——字典树TRIE

    又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计. 它的优点是:利用字符串的公共 ...

  3. Coding编译连接过程中遇到的问题及解决方法(iOS)

    Coding 上下载地址:https://coding.net/u/coding/p/Coding-iOS/git Github源码下载地址:https://github.com/Coding/Cod ...

  4. 全文搜索 Lucene.Net

    Lucene简介 首先说明的是--Lucene.Net只是一个全文检索开发包,不是一个成型的搜索引擎, 它的功能就是负责将文本数据按照某种分词算法进行切词,分词后的结果存储在索引库中,从索引库检索数据 ...

  5. Digital calculation

    No1=1 No2=2 1. let result=No1+No2   let No1++    let No1+=3 2. result=$[No1+No2] 3. result=$((No1+No ...

  6. [IOS基础]关于IOS的UIScreeen,UIView,UIViewController,UIWindow理解

    UIScreen: 代表当前这个屏幕,通过UIApplication可以获得这个属性 UIView:   一个矩形试图,包含用户手势和时间响应 UIViewController: 一个UIView的集 ...

  7. 安卓TabHost页面

    <?xml version="1.0" encoding="UTF-8"?> <!-- TabHost组件id值不可变--> <T ...

  8. Qml 写的弹出层控件

    QML弹出窗口组件,灯箱效果.动画效果,可拖拽 核心思路:一个mask层,一个最顶层,都用rectangle,禁止事件穿透 使用 Popup { id: popup width: 200; heigh ...

  9. Java 网络编程之 Socket

    ========================UDP============================= UDP---用户数据报协议,是一个简单的面向数据报的运输层协议. UDP不提供可靠性, ...

  10. mysql存储过程中 乱码问题解决办法

    中文乱码无论在何时都是一个头疼的问题,mysql的存储过程参数也同样存在这个问题.1.直接使用insert into语句没问题,能够正常插入汉字.2.把insert into语句移到Procedure ...