分析js閉包引起的事件注冊問題
背景：閑暇時間看了幾篇關(guān)于js作用域鏈與閉包的文章，偶然又看到了之前遇到的一個問題，就是在for循環(huán)中為dom節(jié)點注冊事件驅(qū)動，具體見下面代碼：
<!DOCTYPE html>
<html>
<head>
<title>js閉包</title>
<meta charset="utf-8" />
</head>
<body>
<button id="anchor1">1</button>
<button id="anchor2">2</button>
<button id="anchor3">3</button>
<script type="text/javascript" src="jquery-1.12.1.js"></script>
<script type="text/javascript">
function pageLoad(){
for (var i = 1; i <=3; i++) {
var anchor = document.getElementById("anchor" + i);
anchor.onclick = function () {
console.log("anchor"+i);
}
}
}
window.onload = pageLoad;
</script>
</body>
</html>
按照正常的想法，結(jié)果應(yīng)該是點擊3個按鈕分別提示“anchor1”、“anchor2”、“anchor3”；期初我也是這么認為的，但是結(jié)果卻是不管點擊哪個按鈕，都會提示“anchor4”。
這是為什么呢？不要著急，待我們慢慢分析，這里面包含js作用域鏈與閉包的知識，在這里我就不詳細介紹了。
首先我們看這個anchor.onclick，這是什么？這是dom0級事件處理程序啊，廢話，我也知道，博主是蛇精病嗎*************不要吵了，我想說的是這個anchor.onclick
是一個事件處理程序的聲明，就像var name="小明"一樣，這是聲明了，但是還沒有執(zhí)行，這就是關(guān)鍵，我們將上面的js代碼修改一下再來看看：
function pageLoad(){
for (var i = 1; i <=3; i++) {
var anchor = document.getElementById("anchor" + i);
anchor.onclick = function () {
console.log("anchor"+i);
}
if(i==2){
debugger;//我們在這里debugger一下，然后在控制臺手動觸發(fā)#anchor1和#anchor2的點擊事件
}
}
}
window.onload = pageLoad;
看到了吧，我們通過debugger讓循環(huán)在i==2時停止，然后又去控制臺手動觸發(fā)#anchor1和#anchor2的點擊事件，結(jié)果控制臺打印“anchor2”。
整個的邏輯大致是這樣的：anchor.onclick一直保存著i的引用，i在循環(huán)中是一直變化的，從i=1到i=4；雖然在循環(huán)的過程中，anchor.onclick曾經(jīng)保存過（注意“曾經(jīng)”兩字），
1,2,3這三種情況，但是i最終變成了4，所以說，無論點擊哪個按鈕，都會輸出“anchor4”
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關(guān)文章
原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
原生JS操作網(wǎng)頁,給網(wǎng)頁中的所有p元素添加onclick事件，使一個特定的表格隔行變色等等，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了前端JS經(jīng)典問題之跨域的解決方案,文中主要講了瀏覽器的同源策略、跨域限制以及解決跨域的幾種方法,包括CORS、JSONP和配置代理等,需要的朋友可以參考下2024-11-11
在ie 7 8瀏覽器中，如果使用trim()屬性去除空格的話，則會導致報錯，下面有幾種不錯的解決方法2014-05-05
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)簡單的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript實現(xiàn)仿淘寶商品購買數(shù)量的增減效果
最近接了個項目，要開發(fā)一個地方的O2O租書項目，使用的是asp.net mvc技術(shù)，其中咋圖書詳情頁，用戶可以輸入借閱的數(shù)量，器實現(xiàn)此功能的方法是使用了js來控制數(shù)量的增減和校驗，對js實現(xiàn)商品數(shù)量的增減功能感興趣的朋友一起學習吧2016-01-01
Js 獲取當前函數(shù)參數(shù)對象的實現(xiàn)代碼
這篇文章主要介紹了Js 獲取當前函數(shù)參數(shù)對象的實現(xiàn)代碼,需要的朋友可以參考下2016-06-06
js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼
這篇文章主要介紹了js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
分享10個優(yōu)化代碼的CSS和JavaScript工具
如果你想在保持文件的時候或執(zhí) 行的階段lint代碼，那么linting工具也可以如你所愿。這取決于個人的選擇。如果你正在找尋用于CSS和JavaScript最好的 linting工具，那么請繼續(xù)閱讀2016-05-05
坐標軸刻度作為直角坐標系中重要的組成部分,我們需要學會合理的設(shè)置坐標軸的刻度,下面這篇文章主要給大家介紹了關(guān)于坐標軸刻度取值算法之源于echarts的y軸刻度計算需求的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了ES6 Promise對象的含義和基本用法,結(jié)合實例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06