从上篇文章我们知道与浏览器的交互操作如鼠标点击，都会被放入任务队列中，而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行，故而我们有时利用for循环给dom注册事件时候，难以获取for循环中对应的i值，可是我们可以利用闭包啊
方法1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 30px; border: 1px solid #000; margin: 5px; } </style> </head> <body> <div>我是第1个div</div> <div>我是第2个div</div> <div>我是第3个div</div> <div>我是第4个div</div> <div>我是第5个div</div> <div>我是第6个div</div> <div>我是第7个div</div> <div>我是第8个div</div> <div>我是第9个div</div> <div>我是第10个div</div> <script> var divs=document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { function foo(j) { return function () { console.log('这是第'+(j+1)+'个div'); } } var f=foo(i); divs[i].onclick=f; } </script> </body> </html>
方法2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 30px; border: 1px solid #000; margin: 5px; } </style> </head> <body> <div>我是第1个div</div> <div>我是第2个div</div> <div>我是第3个div</div> <div>我是第4个div</div> <div>我是第5个div</div> <div>我是第6个div</div> <div>我是第7个div</div> <div>我是第8个div</div> <div>我是第9个div</div> <div>我是第10个div</div> <script> var divs=document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { divs[i].onclick=function (j) { return function () { console.log('这是第'+(j+1)+'个div'); } }(i); } </script> </body> </html>
在方法2中我们运用了立即执行函数表达式（函数自调用）方法，函数自调用的形式还有如下方法：
<script> (function () { console.log(0); })(); +function () { console.log(1); }(); -function () { console.log(); }(); </script>