JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
更新時(shí)間：2014年01月20日 17:02:15 作者：
響應(yīng)一堆相似的事件，但是每個(gè)事件的參數(shù)都不同，在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件，下面有個(gè)不錯(cuò)的示例，大家可以參考下
有時(shí)候要對(duì)響應(yīng)一堆相似的事件，但是每個(gè)事件的參數(shù)都不同，一開(kāi)始還以為挺簡(jiǎn)單的，用個(gè)for循環(huán)不就得了，結(jié)果發(fā)現(xiàn)，額，都是使用了最后一個(gè)參數(shù)。。。
上網(wǎng)查資料?。?！結(jié)果大神說(shuō)用閉包解決
代碼：
for(var i=0;i<10;i++){
btns[i].onclick=(function(i){
return function(){alert(i)}
})(i)
}
大概原因是直接用btns[i].onclick=function(){alert(i)}時(shí)，JavaScript引擎會(huì)先將for循環(huán)里的代碼執(zhí)行完，
當(dāng)用戶出發(fā)onclick事件時(shí)，JavaScript會(huì)尋找i，結(jié)果會(huì)找到運(yùn)算完成之后的i，也就是10
但是用閉包處理的話，i會(huì)成為函數(shù)的局部變量
上網(wǎng)查資料?。?！結(jié)果大神說(shuō)用閉包解決
代碼：
復(fù)制代碼 代碼如下:
for(var i=0;i<10;i++){
btns[i].onclick=(function(i){
return function(){alert(i)}
})(i)
}
大概原因是直接用btns[i].onclick=function(){alert(i)}時(shí)，JavaScript引擎會(huì)先將for循環(huán)里的代碼執(zhí)行完，
當(dāng)用戶出發(fā)onclick事件時(shí)，JavaScript會(huì)尋找i，結(jié)果會(huì)找到運(yùn)算完成之后的i，也就是10
但是用閉包處理的話，i會(huì)成為函數(shù)的局部變量
您可能感興趣的文章:
- js添加綁定事件的方法
- JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法
- JavaScript中利用jQuery綁定事件的幾種方式小結(jié)
- 理解JS綁定事件
- js綁定事件this指向發(fā)生改變的問(wèn)題解決方法
- JS中批量給元素綁定事件過(guò)程中的相關(guān)問(wèn)題使用閉包解決
- javascript重復(fù)綁定事件造成的后果說(shuō)明
- js移除事件 js綁定事件實(shí)例應(yīng)用
- JS中動(dòng)態(tài)添加事件(綁定事件)的代碼
- Javascript動(dòng)態(tài)綁定事件的簡(jiǎn)單實(shí)現(xiàn)代碼
- js和jquery批量綁定事件傳參數(shù)一(新豬豬原創(chuàng))
- javascript 瀏覽器判斷 綁定事件 arguments 轉(zhuǎn)換數(shù)組 數(shù)組遍歷
- Javascript循環(huán)綁定事件的示例代碼
- 淺析js綁定事件的常用方法
相關(guān)文章
這篇文章主要為大家介紹了GoJs連線繪圖模板Link使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JavaScript 判斷iPhone X Series機(jī)型的方法
這篇文章主要介紹了JavaScript 判斷iPhone X Series機(jī)型的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了淺談JavaScript中的“!!”作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript實(shí)現(xiàn)獲取本機(jī)IP地址
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取本機(jī)IP地址方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了JS高階函數(shù)原理與用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程、一等函數(shù)、高階函數(shù)等相關(guān)概念、原理及使用技巧,需要的朋友可以參考下2019-01-01
Javascript中獲取對(duì)象的原型對(duì)象的方法小結(jié)
這篇文章主要介紹了Javascript中獲取對(duì)象的原型對(duì)象的方法小結(jié),需要的朋友可以參考下2015-02-02
Javascript Echarts空氣質(zhì)量地圖效果詳解
這篇文章主要介紹了詳解Javascript利用echarts畫(huà)空氣質(zhì)量地圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)軌跡回放的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Ajax提交與傳統(tǒng)表單提交的區(qū)別說(shuō)明
本篇文章主要是對(duì)Ajax提交與傳統(tǒng)表單提交的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
最近有項(xiàng)目要實(shí)現(xiàn)N級(jí)菜單，首先從布局入手，即判斷是否有下級(jí)菜單，具體實(shí)現(xiàn)代碼，大家可以參考下本文2017-05-05