Javascript中怎么利用閉包循環(huán)綁定事件，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了京山免費(fèi)建站歡迎大家使用！

例如：一個(gè)不確定長(zhǎng)度的列表，在鼠標(biāo)經(jīng)過(guò)某一條的時(shí)候改變背景。

﹤!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下面的所有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)然的這么寫(xiě)：

﹤!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下面的所有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出來(lái)的都是：這是第6記錄

其實(shí)這里for循環(huán)已將整個(gè)列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6，

有什么好的辦法解決這個(gè)問(wèn)題嗎？

那就是閉包了，個(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" "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"﹥  
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﹥

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前名稱(chēng)：Javascript中怎么利用閉包循環(huán)綁定事件
網(wǎng)頁(yè)路徑：http://jinyejixie.com/article20/jjpsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、網(wǎng)站建設(shè)、微信小程序、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)