轮播图或者tab切换时会遇到：js循环给dom元素添加绑定事件时，事件执行函数里面的i值需要注意的问题

学习轮播图的时候，在操作动态生成控制滚动图的按钮（小圆圈按钮）时发现了一个问题。
1.想要实现的效果：给当前点击的li加current类样式（白色背景色）

2.问题代码如下：

var ol = focus.querySelector('.circle');    
for(var i = 0; i < ul.children.length; i++){
    //ul为盛放轮播图片的容器，圆圈li的个数由图片个数决定
    var li = document.createElement('li');                
    ol.appendChild(li);
    li.addEventListener('click',function(){
        // ol.children[i].className='current';为什么会报错呢
        console.log(ol.children[i])//输出undefined
        console.log(i)//i输出为4        
    })
}

3.发现的问题：
（1）我在给li的绑定事件执行函数里面：给当前的li添加current类样式，但是写下面这句代码ol.children[i].className='current';报以下错误

然后我打印了ol.children[i]，输出为undefined。接着打印了i,输出为4。
我的理解：首先点击事件触发的时候，循环肯定已经执行完了，那么i肯定是最后一次循环的值了。
（2）从效果图可以看到里面有4个li,最大应该是3，为什么是4呢？
我的理解：for循环先是初始化i的值，然后判断条件，符合条件之后执行里面的代码，后面就是执行i++，然后判断条件，符合条件再执行里面的代码。当i等于3时，判断条件i<4，然后继续执行循环里的代码，然后i++，这时i变为了4，4不小于4，循环结束。虽然循环里的代码没有执行，但是i已经自增了，所以i的值为4不是3.

4.修改后的代码：

var ol = focus.querySelector('.circle');    
for(var i = 0; i < ul.children.length; i++){
    var li = document.createElement('li');                
    ol.appendChild(li);
    li.addEventListener('click',function(){
        for(var i = 0;i<ol.children.length ;i++){
            ol.children[i].className = '';
        }
        this.className='current';        
    })
}