Javascript循環(huán)綁定事件的示例代碼
更新時間：2008年10月17日 13:15:00 作者：
我們先看一個關(guān)于Javascript利用循環(huán)綁定事件的例子
例如：一個不確定長度的列表，在鼠標(biāo)經(jīng)過某一條的時候改變背景。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
這個例子循環(huán)為一組對象綁定事件處理函數(shù)。
但是，如果我們在這個基礎(chǔ)上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄？
肯能你會理所當(dāng)然的這么寫：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
測試一下你會發(fā)現(xiàn)alert出來的都是：這是第6記錄
其實這里for循環(huán)已將整個列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6，
有什么好的辦法解決這個問題嗎？
那就是閉包了，個人認(rèn)為閉包是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ǔ)上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄？
肯能你會理所當(dāng)然的這么寫：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
測試一下你會發(fā)現(xiàn)alert出來的都是：這是第6記錄
其實這里for循環(huán)已將整個列表循環(huán)了一遍，并執(zhí)行了i++，所以這里i變成了6，
有什么好的辦法解決這個問題嗎？
那就是閉包了，個人認(rèn)為閉包是js中最難捉摸的地方之一，
看看什么是閉包：
閉包時是指內(nèi)層的函數(shù)可以引用存在與包圍他的函數(shù)內(nèi)的變量，即使外層的函數(shù)的執(zhí)行已經(jīng)終止。
這個例子中我們可以這樣做：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
PS：閉包很難，很復(fù)雜！
相關(guān)文章
這篇文章主要介紹了微信小程序基于高德地圖查找位置并顯示文字,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
webpack-dev-server遠(yuǎn)程訪問配置方法
下面小編就為大家分享一篇webpack-dev-server遠(yuǎn)程訪問配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了JS原型和繼承，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了JS彈出可拖拽可關(guān)閉的div層完整實現(xiàn)方法,包括對div彈出層的樣式及功能的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
JavaScript數(shù)組合并的8種常見方法小結(jié)
項目過程中經(jīng)常會遇到 JS 數(shù)組合并的情況,時常為這個糾結(jié),這里整理一下,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組合并的8種常見方法,需要的朋友可以參考下2022-11-11
經(jīng)常在做app的時候,會有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實現(xiàn)熱更新的思路與詳細(xì)過程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JavaScript 類型轉(zhuǎn)換的詳細(xì)實現(xiàn)
本文主要介紹了JavaScript 類型轉(zhuǎn)換的詳細(xì)實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
本文主要介紹了uniapp時間格式化處理實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)隨機抽獎小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了如何利用javascript接收json信息并進行處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08