為什麼用for迴圈繫結的事件處理函式只有最後一個有效

admin發表於2017-03-08
事件函式

在允許的情況下使用for迴圈批量繫結事件處理函式非常的便利，但是有時候發現，明明挨個便利都繫結了事件處理函式，卻自有最後一個有效，下面通過一個例項簡單介紹一下出現此種現象的原因。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件處理函式批量繫結</title>
<style>
body, p, ul, li, ol, dt, dd, dt, h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
}
ul{list-style:none}
#main{
  width:400px;
  margin:0px auto;
}
.nav{
  width:100px;
  height:30px;
  float:left;
  position:relative;
}
.second{
  position:absolute;
  left:0px;
  top:30px;
  display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var main=document.getElementById("main");
  var uls=main.children;
  var lis=uls[0].children;
  for(var i=0;i<lis.length-1;i++){
     lis[i].onmouseover=function(){ 
       lis[i].children[1].style.display="block";
     }
 
     lis[i].onmouseout=function(){
       lis[i].children[1].style.display = "none";
     }
  } 
}
</script>
</head>
<body>
<div id="main">
<ul>
<li class="nav">
  <a href="#">螞蟻部落</a>
  <ul class="second">
   <li>div+css教程</li>
   <li>div+css教程</li>
   <li>div+css教程</li>
  </ul>
</li>
<li class="nav">
  <a href="#">螞蟻部落</a>
  <ul class="second">
   <li>div+css教程</li>
   <li>div+css教程</li>
   <li>div+css教程</li>
  </ul>
</li>
<li class="nav">
  <a href="#">螞蟻部落</a>
  <ul class="second">
   <li>div+css教程</li>
   <li>div+css教程</li>
   <li>div+css教程</li>
  </ul>
</li>
</ul>
</div>
</body>
</html>

在以上程式碼中，當滑鼠放在主導航的時候，只有第三個導航會彈出二級選單，之所以出現這個現象，是由於當通過for迴圈將事件處理函式註冊完畢之後，i的值變成3了，所以當觸發事件呼叫事件處理函式的時候，只是控制的第三個二級選單。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>事件處理函式批量繫結</title>
<style>
body, p, ul, li, ol, dt, dd, dt, h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
}
ul{list-style:none}
#main{
  width:400px;
  margin:0px auto;
}
.nav{
  width:100px;
  height:30px;
  float:left;
  position:relative;
}
.second{
  position:absolute;
  left:0px;
  top:30px;
  display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var main=document.getElementById("main");
  var uls=main.children;
  var lis=uls[0].children;
  for(var i=0;i<lis.length;i++){
    lis[i].index=i;
    lis[i].onmouseover=function(){
      lis[this.index].children[1].style.display="block";
    }
 
    lis[i].onmouseout = function () {
      lis[this.index].children[1].style.display="none";
    }
  } 
}
</script>
</head>
<body>
<div id="main">
<ul>
<li class="nav">
  <a href="#">螞蟻部落</a>
  <ul class="second">
   <li>div+css教程</li>
   <li>div+css教程</li>
   <li>div+css教程</li>
  </ul>
</li>
<li class="nav">
  <a href="#">螞蟻部落</a>
  <ul class="second">
   <li>div+css教程</li>
   <li>div+css教程</li>
   <li>div+css教程</li>
  </ul>
</li>
<li class="nav">
  <a href="#">螞蟻部落</a>
  <ul class="second">
   <li>div+css教程</li>
   <li>div+css教程</li>
   <li>div+css教程</li>
  </ul>
</li>
</ul>
</div>
</body>
</html>

以上程式碼解決上面你的問題，方法就是為每一個li元素建立一個index屬性，然後將當前索引值賦值給這個屬性，在事件處理函式中使用this.index作為索引即可。

相關文章