工作中遇到了一个问题，定位一个含有变量值得dom节点，用for循环给这个dom节点绑定事件，结果发现绑定事件后传到方法里的值是定值，而不是for循环的变量值，这里可以用闭包给每个变量的dom节点绑定事件。
先看两段在网上找到的例子方法：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for (var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){ //当点击时for循环已经结束
alert(i);
};
}
}
</script>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>010</li>
</ul>
</body>
</html>
上面这段代码是不用闭包，你会发现每次输出的都是定值4，如果你想给每个li绑定自身的事件，就需要使用闭包了，
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for (var i=0;i<aLi.length;i++){
(function(i){
alert(i);
aLi[i].onclick = function(){
alert(i);
};
})(i);
}
};
</script>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</body>
</html>
上面这段代码就使用了闭包在for循环中定义一个方法， 把变量值i传进去这样i这个局部变量就不会被js的垃圾处理机制给释放掉。
下面在看一下我在工作中遇到的代码：
image.png
在这里我用了两种方法：
如代码中的1处，传进去的是event对象，我在对象中找到唯一的dom节点再用字符串分割的方式取到具体的数字下标，如代码中的红框处：
image.png
代码中2处，用的就是闭包的形式，定义了一个函数方法，在方法中用dom节点去取值，但是需要注意的是这里面不能用jQuery的方法去给dom节点绑定事件，会绑定不上去，具体原因容后深究。
网友评论