javascript事件處理函式迴圈批量繫結簡單介紹

admin發表於2017-03-23
JavaScript事件函式

在實際應用中，事件處理函式迴圈批量註冊是非常常見的，例如多個元素註冊事件處理函式的時候，它的優勢非常的明顯，如果挨個註冊將是一件非常龐大的工作，如果批量進行註冊，那麼將會輕鬆很多。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css">
ul li{
  list-style:none;
  height:25px;
  line-height:25px;
  width:150px;
  font-size:12px;
}
#show{
  width:100px;
  font-size:12px;
  color:red;
}
</style> 
<script type="text/javascript">
window.onload=function(){
  var lis=document.getElementsByTagName("li"); 
  var show=document.getElementById("show");
  for(var index=0;index<lis.length;index++){
    lis[index].onclick=function(){
      show.innerHTML=index;
    }
  }
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body> 
</html>

以上程式碼的初衷是，點選li元素的時候，能夠獲取當前li元素的索引值，但是令人遺憾的是，點選任何元素獲取的值都是4，這是因為當通過for迴圈給每一個li元素註冊事件完畢之後，index的最終值會變成4，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css">
ul li{
  list-style:none;
  height:25px;
  line-height:25px;
  width:150px;
  font-size:12px;
}
#show{
  width:100px;
  font-size:12px;
  color:red;
}
</style> 
<script type="text/javascript">
window.onload=function(){
  var lis=document.getElementsByTagName("li"); 
  var show=document.getElementById("show");
 
  for(var index=0;index<lis.length;index++){
    (function(index){
      lis[index].onclick=function(){
        show.innerHTML=index;
      }
    })(index)
  }
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body> 
</html>

以上程式碼實現了我們的要求，可以正確獲取點選元素的索引值。

相關文章