创建多个点击事件，使用循环遇到的问题。

想创建多个点击事件，使用循环遇到的问题。

var liArr=document.getElementsByTagName('li');

for(var i=0;i<liArr.length;i++){
        //此事件是点击事件 当点击触发时 循环立即执行 每点一次循环就执行完毕一次
        liArr[i].onclick=function(){
           console.log(i);//3
        }
  }

解决方法

1.使用源事件

var liArr = document.getElementsByTagName('li');
    for(var i=0;i<liArr.length;i++){
        liArr[i].onclick=function(){
        //事件源 每点击一次 触发一次事件源
        console.log(event.target);
        }
    }

2.使用foreach

 //document.querySelectorAll支持数组的foreach

var liArr = document.querySelectorAll('li');
    liArr.forEach(function(item,index){
        item.onclick=function(){
            console.log(item.innerText);
        }
    })

补充:对于伪数组不能使用数组的方法    解决：用call方法改变this指向

var li = box.children;
    var res = [].forEach.call(li,function(item,index){
        console.log(item);
  })

 

3.给点击事件封装一个函数（循环此函数）

var liArr = document.getElementsByTagName('li');

    function fun(a){
      liArr[a].onclick=function(){
        
        console.log(liArr[a].innerText);
        }  
    }
   for(var i=0;i<liArr.length;i++){
         fun(i);
    }