作者：feiwen8772 時(shí)間： 2008-10-14 文檔類型：轉(zhuǎn)載 來自：WEB前端開發(fā)
我們先看一個(gè)關(guān)于Javascript利用循環(huán)綁定事件的例子：
例如：一個(gè)不確定長(zhǎng)度的列表，在鼠標(biāo)經(jīng)過某一條的時(shí)候改變背景。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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下面的所有l(wèi)i的對(duì)象數(shù)組 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>
這個(gè)例子循環(huán)為一組對(duì)象綁定事件處理函數(shù)。
但是，如果我們?cè)谶@個(gè)基礎(chǔ)上增加一些需求。比如在點(diǎn)擊某一條記錄的時(shí)候彈出這是第幾條記錄？
肯能你會(huì)理所當(dāng)然的這么寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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下面的所有l(wèi)i的對(duì)象數(shù)組 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"; } list_obj[i].onclick = function() { alert("這是第" + i + "記錄"); } } </script> </body> </html>
測(cè)試一下你會(huì)發(fā)現(xiàn)alert出來的都是：這是第6記錄其實(shí)這里for循環(huán)已將整個(gè)列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6，有什么好的辦法解決這個(gè)問題嗎？那就是閉包了，個(gè)人認(rèn)為閉包是js中最難捉摸的地方之一，
看看什么是閉包：閉包時(shí)是指內(nèi)層的函數(shù)可以引用存在與包圍他的函數(shù)內(nèi)的變量，即使外層的函數(shù)的執(zhí)行已經(jīng)終止。可以查閱：http://www.css88.com/article.asp?id=469
這個(gè)例子中我們可以這樣做：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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"> function tt(nob) { this.clickFunc = function() { alert("這是第" + (nob + 1) + "記錄"); } } var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有l(wèi)i的對(duì)象數(shù)組 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"; } var col = new tt(i); list_obj[i].onclick = col.clickFunc; } </script> </body> </html>
PS：閉包很難，很復(fù)雜！
出處：WEB前端開發(fā) 責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
藍(lán)色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨(dú)家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點(diǎn)的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請(qǐng)不要盜鏈到本站，且不準(zhǔn)打上各自站點(diǎn)的水印，亦不能抹去我站點(diǎn)水印。
特別注意：本站所提供的攝影照片，插畫，設(shè)計(jì)作品，如需使用，請(qǐng)與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請(qǐng)與我們聯(lián)系，我們將立即刪除修改。
