<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(i);
}}
//上例的每次输出都是5
//因为for循环是同步阻塞式的运行方式,当点击事件调用i时候,都是执行完毕后的i,所以无法获取当前i
//思路一: 将外for内将输出的i及时绑定到当前li的属性上
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
console.log(this.index);
} }
//思路二:利用闭包原理
for(var i=0;i<lis.length;i++){
(function(arg){
lis[arg].οnclick=function(){
console.log(arg);
}
})(i);}
//思路三:使用ES6 let特性
for(let i=0;i<lis.length;i++){
lis[i].οnclick=fucntion(){
console.log(i);
}
}