Javascript循環(huán)綁定事件的示例代碼
更新時間：2008年10月17日 13:15:00 作者：
我們先看一個關(guān)于Javascript利用循環(huán)綁定事件的例子
例如：一個不確定長度的列表，在鼠標經(jīng)過某一條的時候改變背景。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個例子循環(huán)為一組對象綁定事件處理函數(shù)。
但是，如果我們在這個基礎(chǔ)上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄？
肯能你會理所當然的這么寫：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
測試一下你會發(fā)現(xiàn)alert出來的都是：這是第6記錄
其實這里for循環(huán)已將整個列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6，
有什么好的辦法解決這個問題嗎？
那就是閉包了，個人認為閉包是js中最難捉摸的地方之一，
看看什么是閉包：
閉包時是指內(nèi)層的函數(shù)可以引用存在與包圍他的函數(shù)內(nèi)的變量，即使外層的函數(shù)的執(zhí)行已經(jīng)終止。
這個例子中我們可以這樣做：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
PS：閉包很難，很復(fù)雜！
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個例子循環(huán)為一組對象綁定事件處理函數(shù)。
但是，如果我們在這個基礎(chǔ)上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄？
肯能你會理所當然的這么寫：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
測試一下你會發(fā)現(xiàn)alert出來的都是：這是第6記錄
其實這里for循環(huán)已將整個列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6，
有什么好的辦法解決這個問題嗎？
那就是閉包了，個人認為閉包是js中最難捉摸的地方之一，
看看什么是閉包：
閉包時是指內(nèi)層的函數(shù)可以引用存在與包圍他的函數(shù)內(nèi)的變量，即使外層的函數(shù)的執(zhí)行已經(jīng)終止。
這個例子中我們可以這樣做：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
PS：閉包很難，很復(fù)雜！
您可能感興趣的文章:
- js添加綁定事件的方法
- JavaScript綁定事件監(jiān)聽函數(shù)的通用方法
- JavaScript中利用jQuery綁定事件的幾種方式小結(jié)
- 理解JS綁定事件
- JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
- js綁定事件this指向發(fā)生改變的問題解決方法
- JS中批量給元素綁定事件過程中的相關(guān)問題使用閉包解決
- javascript重復(fù)綁定事件造成的后果說明
- js移除事件 js綁定事件實例應(yīng)用
- JS中動態(tài)添加事件(綁定事件)的代碼
- Javascript動態(tài)綁定事件的簡單實現(xiàn)代碼
- js和jquery批量綁定事件傳參數(shù)一(新豬豬原創(chuàng))
- javascript 瀏覽器判斷 綁定事件 arguments 轉(zhuǎn)換數(shù)組 數(shù)組遍歷
- 淺析js綁定事件的常用方法
相關(guān)文章
數(shù)組的去重方法,其實無論實在實際項目還是在面試中都會有用到的,下面這篇文章主要給大家介紹了非常全面的12種js數(shù)組去重的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了Bootstrap創(chuàng)建可折疊組件的對應(yīng)方法，以實例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下2016-02-02
常見的瀏覽器存儲方式（cookie、localStorage、sessionStorage）
今天我們從前端的角度了解一下瀏覽器存儲，我們常見且常用的存儲方式主要由兩種：cookie、webStorage（localStorage和sessionStorage）。本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-05-05
JavaScript+CSS實現(xiàn)仿Mootools豎排彈性動畫菜單效果
這篇文章主要介紹了JavaScript+CSS實現(xiàn)仿Mootools豎排彈性動畫菜單效果,可實現(xiàn)鼠標滑過菜單項呈現(xiàn)彈性移動顯示的效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
下面小編就為大家?guī)硪黄谝粋€頁面重復(fù)使用一個js函數(shù)的方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
javascript實現(xiàn)的鼠標鏈接提示效果生成器代碼
javascript實現(xiàn)的鼠標鏈接提示效果生成器代碼...2007-06-06
這篇文章主要介紹了微信小程序之發(fā)送短信倒計時功能,需要的朋友可以參考下2017-08-08
在一次面試過程中，面試官問過我關(guān)于瀏覽器cookie的問題包括：cookie大小，cookie個數(shù)限制以及如何操作cookie等一系列的問題。2011-01-01
js 鼠標、鍵盤的幾個事件的例子2008-07-07
這篇文章主要介紹了js彈出確認是否刪除對話框，具體實現(xiàn)代碼如下，需要的朋友可以參考下2014-03-03