利用闭包解决for循环里onclick事件不能捕捉实时i值问题

2022-10-15,,,,

问题描述

我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclick是一个异步调用的,所以会带来一个问题,当我们触发这个事件的时候,我们能获取的i值是for完整执行完后i的值,而不能获取到代码顺序里i的值,看一个例子

window.onload = funtion(){
var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i ++ ){
lis[i].onclick = function(){
console.log(i);//当我们点击面页里的li时候 i 总是等于lis.length
};
}
};

以前惯用的解决方式

window.onload = funtion(){
var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i ++ ){
lis.index = i;
lis[i].onclick = function(){
console.log( this.index );//每个li对应有着自己的索引值,也就可以判断出是什么时
};
}
};

利用闭包解决

window.onload = function(){
var lis = document.getElementsByTagName('li');
for( var i = 0; i < lis.length; i++ ){
(function (n){
lis[n].onclick = function(){
console.log( i + '-' + n );//i总是等于10 而n则是安装顺序
};
}(i));
}
};

原理:闭包的局部作用域。由于这个你们函数总是和代码执行顺序一样的,所以n可以实时记录i的值。由于for每执行一次,就执行一次匿名函数,每一次执行有自己的执行环境,有着自己的作用域链,所以用这函数里面一个变量来记录一下实时的i的值,这个n是不会随着i的改变而改变的

利用闭包解决for循环里onclick事件不能捕捉实时i值问题的相关教程结束。

《利用闭包解决for循环里onclick事件不能捕捉实时i值问题.doc》

下载本文的Word格式文档,以方便收藏与打印。