JS循环添加事件

通常我们会这样给元素添加事件：

var ul=document.getElementsByTagName("ul")[0];
var list=document.getElementsByTagName("li");
 for(var i=0;i<li.length;i++){
   list[i].onclick=function(){
   alert("我的index是"+i);
 } }

但结果往往不是我们想象的那样，它们全部弹出是“我的index是2”，原因是JavaScript是单线程执行任务的，添加事件会被罗列到任务单中，所以i的值全是2；

解决方法：

方式1. 使用闭包。
var ul = document.getElementsByTagName("ul")[0];
var list = ul.getElementsByTagName("li");  
function foo(){
    for(var i = 0, len = list.length; i < len; i++){
        var that = list[i];
        list[i].onclick = (function(k){  return function(){
                alert("我的index是"+k);              };
        })(i);
    }
}
foo(); 

方式2.事件代理
var ul = document.querySelector(‘ul‘);
var list = document.querySelectorAll(‘ul li‘);  

ul.addEventListener(‘click‘, function(){
    var e = arguments[0] || window.event;
    var target = e.target || e.srcElement;  

    for(var i = 0, len = list.length; i < len; i++){
        if(list[i] == target){
            alert("我的index是"+i);           }
    }
});

方式3. 引入jQuery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）
// delegate方法
$("ul").delegate("li", "click", function(){
    var index = $(this).index();
    var info = $(this).html();
    alert(index + "----" + info);
});
 // on方法
$("ul").on("click", "li", function(){
    var index = $(this).index();
    var info = $(this).html();
    alert(index + "----" + info);
});

方式4. 使用ES6中的新特性let来声明变量用let来声明的变量将具有块级作用域，很明显可以达到要求，不过需要注意的是得加个‘use strict‘（使用严格模式）才会生效。
var ul = document.getElementsByTagName("ul")[0];
var list = ul.getElementsByTagName("li");  

function foo(){‘use strict‘
    for(let i = 0, len = list.length; i < len; i++){
        list[i].onclick = function(){
            alert(i + "----" + this.innerHTML);
        }
    }
}
foo();  

仅供参考，如有错误请指正！