淺談JS閉包中的循環(huán)綁定處理程序

更新時間：2014年11月09日 09:21:08 投稿：hebedich

初學(xué)者經(jīng)常碰到的,即獲取HTML元素集合，循環(huán)給元素添加事件。在事件響應(yīng)函數(shù)中(event handler)獲取對應(yīng)的索引。但每次獲取的都是最后一次循環(huán)的索引。原因是初學(xué)者并未理解JavaScript的閉包特性。

前幾天工作中寫前端js代碼時，遇到了遍歷元素給它添加單擊事件。就是這個問題讓我整整調(diào)了一個下午。最后還是下班回家，上網(wǎng)查資料才知道怎么解決的。（PS：之前也在《jQuery基礎(chǔ)教程》第四版中看過講循環(huán)綁定處理程序的內(nèi)容，當(dāng)時估計也沒怎么用心看，所以沒記起來。）
　　大神要是知道這類情況，可以關(guān)掉窗口，寫這些主要是給像我一樣的小白看的。謝謝！

　　先貼上錯誤的例子讓大家看看。（例子里面用到j(luò)Query，請導(dǎo)入jQuery庫）

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<title>循環(huán)綁定處理程序</title>
　　<script src="js/jquery-2.1.1.min.js"></script>
　　<script type="text/javascript">
　　　　$(function(){
　　　　　　for(var i=1;i<=4;i++){
　　　　　　　　$("#btn"+i).get(0).onclick=function(){
　　　　　　　　　　alert(i);
　　　　　　　　}
　　　　　　}
　　　　});
　　</script>
</head>
<body>
　　<button id="btn1">按鈕1</button>
　　<button id="btn2">按鈕2</button>
　　<button id="btn3">按鈕3</button>
　　<button id="btn4">按鈕4</button>
</body>
</html>

　　這段代碼運行之后，點擊按鈕，彈出的alert中顯示數(shù)據(jù)幾呢，我之前一直認(rèn)為按鈕1到按鈕4，對應(yīng)的alert中的數(shù)字也是1到4。要是你也這樣想，那就錯了。
　　點擊每個按鈕，alert中都是顯示數(shù)字4，沒想到吧！
　　現(xiàn)在寫幾種解決方案，共大家參考！
　　第一種、編寫一個function，在這個function中返回一個函數(shù)

復(fù)制代碼代碼如下:

　　　　}
　　});
　　var btnClick=function(value){
　　　　return function(){
　　　　　　alert(value);
　　　　}
　　}
</script>

　　第二種、使用立即調(diào)用函數(shù)表達(dá)式
　　(function(value){
　　　　//代碼塊
　　})(i)//這就是立即調(diào)用函數(shù)表達(dá)式

復(fù)制代碼代碼如下:

　　　　}
　　});
</script>

　　第三種、使用jQuery的each函數(shù)

復(fù)制代碼代碼如下:

<script type="text/javascript"> 

　　$(function(){ 

　　　　$.each([1,2,3,4],function(index,value){ 

　　　　　　　　$("#btn"+value).get(0).onclick=function(){ 

　　　　　　　　alert(value); 

　　　　　　} 

　　　　}); 

　　}); 

</script>

　　使用上面三種情況，就可以避免一開始那個情況了。
　　其中g(shù)et(0)指的是將jQuery對象轉(zhuǎn)為DOM對象。

以上就是個人對JS閉包中的循環(huán)綁定處理程序的理解，分享給大家，希望能對小伙伴們有所幫助

您可能感興趣的文章: