我們先看一個關於Javascript利用循環綁定事件的例子：
例如：一個不確定長度的列表，在鼠標經過某一條的時候改變背景。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<ul id="list">
<li>第1條記錄</li>
<li>第2條記錄</li>
<li>第3條記錄</li>
<li>第4條記錄</li>
<li>第5條記錄</li>
<li>第6條記錄</li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
}
</script>
</body>
</html>
這個例子循環為一組對象綁定事件處理函數。
但是，如果我們在這個基礎上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄？
肯能你會理所當然的這麼寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<ul id="list">
<li>第1條記錄</li>
<li>第2條記錄</li>
<li>第3條記錄</li>
<li>第4條記錄</li>
<li>第5條記錄</li>
<li>第6條記錄</li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
&n