现在要实现一个小功能
<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul>
点击0123输出有序数字！
如果猜得没错你会很自信的这么写，
<script type="text/javascript">
var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i ++) {
li[i].addEventListener('click',function () {
console.log(i);
},false)
}
</script>
然后你会发现全部输出4，事实证明这是错误的！
分析：
for循环在循环的事件
function () {
console.log(i);
}
但是那个匿名函数是在for循环执行完成后（用户单击链接时）才被调用的，
调用的时候需要找到变量 i ，函数内部没有 i ，所以使用外界的变量 i ，
循环的时候 i 不小于 li.length 的时候，i 的值为4 ，所以点击时会输出这个 4.
正确的做法是
<script type="text/javascript">
var li = document.getElementsByTagName('li');
for (var i = 0; i < li.length; i ++) {
(function (i) {
li[i].addEventListener('click',function () {
console.log(i);
},false)
}(i))
}
</script>
在外围添加一个立即执行函数，使用 i 传参
模拟它的循环
第一圈
(function (0) {
li[0].addEventListener('click',function () {
console.log(0);
},false)
}(0))
}
第二圈
(function (1) {
li[1].addEventListener('click',function () {
console.log(1);
},false)
}(1))
}
......
相当于给每个元素都绑定了事件