js遍历元素并添加事件

举个例子：我们需要给每个li标签添加鼠标移入事件

<ul>
    <li class="active">首页</li>
    <li>国内</li>
    <li>国际</li>
    <li>军事</li>
    <li>财经</li>
    <li>互联网</li>
    <li>体育</li>
    <li>科技</li>
</ul>

下面是js代码

方法一：通过闭包实现

var lis = document.getElementsByTagName("li");

//方法一：闭包
for(var i=0;i<lis.length;i++){
    lis[i].addEventListener("mouseover",function(k){
        return function(){
            console.log(k);
        }
    }(i));
}

方法二：事件委托

var lis = document.getElementsByTagName("li");
//方法二：事件委托
var ul = document.getElementsByTagName("ul")[0];
ul.addEventListener("mouseover",function(){
    var e = arguments[0] || window.event;
    var target = e.target || e.srcElement;    
    for(var i=0;i<lis.length;i++){
        if(lis[i] == target){
            console.log(i);
        }
    }
});

方法三：ES6 let块级作用域实现

var lis = document.getElementsByTagName("li");
//方法三：ES6 let块级作用域
'use script'
for(let i=0;i<lis.length;i++){
    lis[i].onmouseover = function(){
        console.log(i);
    }
}