for迴圈批量註冊事件處理函式

admin發表於2018-07-16
事件函式

如果需要註冊事件處理函式的元素數量過多，一個一個的註冊將會是一件非常龐大的任務。

批量註冊將會極大的減少工作量，下面通過例項程式碼介紹一下如何利用for語句實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  for(var i=0;i<lis.length;i++){ 
    lis[i].index=i;
    lis[i].onclick = function () { alert(this.index) }
  } 
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

使用for為每個li元素註冊click事件處理函式，當點選li元素的時候，彈出當前li元素索引值，特別注意的是，之所以將變數i賦值給自定義的屬性index，而不是直接alert(i)，是因為，for迴圈執行完畢之後，i的值就變成了li元素的數量，li[ i ]也就會報錯。

使用閉包的方式實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function()
{
  var obox=document.getElementById("box");
  var lis=obox.getElementsByTagName("li");
  for(var i=0;i<lis.length;i++)
  { 
    lis[i].onclick=(function(i){ 
      return function(){alert(i)} 
    })(i) 
  } 
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

以上程式碼實現了同樣的功能，這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。 

（2）.閉包可以參閱JavaScript 閉包一章節。

相關文章