<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li> </ul>
使用js为多个未知数量的li循环添加事件的时候很容易想到如下代码
<script>
for (var i = 0, lis = document.getElementsByTagName("li"), len = lis.length; i < len; i++) {
lis[i].onclick = function () {
alert(i);
}
}
</script>
但是每次点击都会执行最后一次的结果 alert弹出4
因为在for循环里面指定给lis[i].onclick的事件处理程序，也就是onclick那个匿名函数是在for循环执行完成后（用户单击链接时）才被调用的。而调用时，需要对变量i求值，解析程序首先会在事件处理程序内部查找，但i没有定义。然后，又到方法外部去查找，此时有定义，但i的值是4（只有i大于4才会停止执行for循环）。因此，就会取得该值——这正是闭包（匿名函数）要使用其外部作用域中变量的结果。而且，这也是由于匿名函数本身无法传递参数（故而无法维护自己的作用域）造成的。
那现在原因是知道了，如何来避免这种情况呢？
既然已经知道函数调用外部变量的时候就构成了一个闭包，里面的变量会受到别的地方的影响，那么我们
现在要做的就是，构建一个只有自己本身才可访问的闭包，保存只供本身使用的变量
构建一个闭包很简单，代码如下：
<script>
for (var i = 0, lis = document.getElementsByTagName("li"), len = lis.length; i < len; i++) {
(function (i) {
lis[i].onclick = function () {
alert(i);
}
})(i);
}
</script>
相关内容
-
为什么css放上面js放下面
css放上面js放下面的原因：1、在加载html生成DOMtree的时候，可以同时对DOMtree进行渲染，这样可以防止闪跳，白屏或者布局混乱；2、javascript加载后会...
-
js如何修改css
js修改css的方法：1、使用【obj.style.cssTest】来修改嵌入式的css；2、使用【bj.className】来修改样式表的类名；3、使用更改外联的css文件，...
-
js如何改变css样式
js改变css样式的方法：1、使用cssText方法；2、使用【setProperty()】方法；3、使用css属性对应的style属性。本教程操作环境：windows7系统、...
-
如何使用纯CSS、JS实现图片轮播效果
本篇文章给大家详细介绍一下使用纯CSS、JS实现图片轮播效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。<!DOCTYPEhtml>&l...
-
js如何修改css样式
js修改css样式的方法：1、使用【obj.className】来修改样式表的类名；2、使用【obj.style.cssTest】来修改嵌入式的css；3、使用【obj.cla...
-
聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的
本篇文章给大家介绍一下CSS和JS阻塞DOM解析和渲染的原理。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。hello~各位亲爱的看官老爷们大家好。估计大家都...
-
tp5如何引入css文件
tp5引入css文件的方法：1、将css文件放在public目录下的static文件里即可；2、在页面引入中写上“<linkrel="stylesheet&qu...
-
10款好看且实用的文字动画特效，让你的页面更吸引人！
图片和文字是网页不可缺少的组成部分，图片运用得当可以让网页变得生动，但普通的文字不行。那么就可以给文字添加一些样式，实现一下好看的文字效果，让页面变得更交互，更吸引人。下面PH...
-
HTML+CSS+JS实现雪花飘扬（代码分享）
使用HTML+CSS+JS如何实现下雪特效？下面本篇文章给大家分享一个HTML+CSS+JS实现雪花飘扬的示例，希望对大家有所帮助。很多南方的小伙伴可能没怎么见过或者从来没见过...
-
详细介绍下js中的window与document
首先我们来看看window，它代表的是浏览器中一个打开的窗口。对象属性 window//窗口自身 window.self//引用本窗户window=window.self ...
