本文執行個體講述了javascript使用for迴圈大量註冊的事件不能正確擷取索引值的解決方案。分享給大家供大家參考。具體分析如下：
可能不少朋友會遇到一個問題，那就是當使用for迴圈大量註冊事件處理函數，然後最後通過事件處理函數擷取當前元素的索引值的時候會失敗，先看一段代碼執行個體:
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>雲棲社區</title>
<style type="text/css">
li{
width:240px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
oLis[index].onclick=function(){
oshow.innerHTML=index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>只有努力奮鬥才會有美好的明天。</li>
<li>分享互助是進步最大的源動力。</li>
<li>每一天都是新的，要好好珍惜。</li>
<li>沒有人一開始就是高手，只有努力才有成長的可能</li>
<li>只有當下的時間是可貴的，下一秒都是虛幻的</li>
</ul>
</body>
</html>
在上面的代碼中，當點擊li元素的時候彈出值始終是四，我們本來的想法是，點擊li元素在div中顯示當前li元素的索引值，下面就簡單分析一下其中的原因。原因非常的簡單，當for迴圈執行完畢以後，index的值已經變為四，於是也就出現了上面的現象。
代碼修改如下:
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>雲棲社區</title>
<style type="text/css">
li{
width:240px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
oLis[index]._index=index;
oLis[index].onclick=function(){
oshow.innerHTML=this._index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>只有努力奮鬥才會有美好的明天。</li>
<li>分享互助是進步最大的源動力。</li>
<li>每一天都是新的，要好好珍惜。</li>
<li>沒有人一開始就是高手，只有努力才有成長的可能</li>
<li>只有當下的時間是可貴的，下一秒都是虛幻的</li>
</ul>
</body>
</html>
上面的代碼實現了我們的要求，當然也可以使用閉包的方式，代碼如下:
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>雲棲社區</title>
<style type="text/css">
li{
width:240px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
(function(index){
oLis[index].onclick=function(){
oshow.innerHTML=index;
}
})(index)
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>只有努力奮鬥才會有美好的明天。</li>
<li>分享互助是進步最大的源動力。</li>
<li>每一天都是新的，要好好珍惜。</li>
<li>沒有人一開始就是高手，只有努力才有成長的可能</li>
<li>只有當下的時間是可貴的，下一秒都是虛幻的</li>
</ul>
</body>
</html>
希望本文所述對大家基於javascript的web程式設計有所協助。
