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