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