js閉包引起的事件注冊(cè)問(wèn)題介紹
背景：閑暇時(shí)間看了幾篇關(guān)于js作用域鏈與閉包的文章，偶然又看到了之前遇到的一個(gè)問(wèn)題，就是在for循環(huán)中為dom節(jié)點(diǎn)注冊(cè)事件驅(qū)動(dòng)，具體見(jiàn)下面代碼：
<!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)該是點(diǎn)擊3個(gè)按鈕分別提示“anchor1”、“anchor2”、“anchor3”；期初我也是這么認(rèn)為的，但是結(jié)果卻是不管點(diǎn)擊哪個(gè)按鈕，都會(huì)提示“anchor4”。
這是為什么呢？不要著急，待我們慢慢分析，這里面包含js作用域鏈與閉包的知識(shí)，在這里我就不詳細(xì)介紹了。
首先我們看這個(gè)anchor.onclick，這是什么？這是dom0級(jí)事件處理程序啊，廢話，我也知道，博主是蛇精病嗎*************不要吵了，我想說(shuō)的是這個(gè)anchor.onclick
是一個(gè)事件處理程序的聲明，就像var name="小明"一樣，這是聲明了，但是還沒(méi)有執(zhí)行，這就是關(guān)鍵，我們將上面的js代碼修改一下再來(lái)看看：
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;//我們?cè)谶@里debugger一下，然后在控制臺(tái)手動(dòng)觸發(fā)#anchor1和#anchor2的點(diǎn)擊事件
}
}
}
window.onload = pageLoad;
看到了吧，我們通過(guò)debugger讓循環(huán)在i==2時(shí)停止，然后又去控制臺(tái)手動(dòng)觸發(fā)#anchor1和#anchor2的點(diǎn)擊事件，結(jié)果控制臺(tái)打印“anchor2”。
整個(gè)的邏輯大致是這樣的：anchor.onclick一直保存著i的引用，i在循環(huán)中是一直變化的，從i=1到i=4；雖然在循環(huán)的過(guò)程中，anchor.onclick曾經(jīng)保存過(guò)（注意“曾經(jīng)”兩字），
1,2,3這三種情況，但是i最終變成了4，所以說(shuō)，無(wú)論點(diǎn)擊哪個(gè)按鈕，都會(huì)輸出“anchor4”
結(jié)語(yǔ)：js中作用域鏈與閉包的知識(shí)很重要，雖然在此沒(méi)有講，其實(shí)是害怕講不明白，反而誤導(dǎo)了大家
以上這篇js閉包引起的事件注冊(cè)問(wèn)題介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
很多語(yǔ)言把數(shù)組作為集合的基礎(chǔ)，所以array是學(xué)習(xí)每一項(xiàng)語(yǔ)言必須掌握的。2010-01-01
深入Javascript函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對(duì)象與作用域鏈)使用詳解
本篇文章對(duì)Javascript中函數(shù)、遞歸與閉包(執(zhí)行環(huán)境、變量對(duì)象與作用域鏈)的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
簡(jiǎn)介JavaScript中Math.LOG10E屬性的使用
javascript Math.random()隨機(jī)數(shù)函數(shù)
溫故知新——JavaScript中的字符串連接問(wèn)題最全總結(jié)（推薦）
關(guān)于eval 與new Function 到底該選哪個(gè)?
javaScript array(數(shù)組)使用字符串作為數(shù)組下標(biāo)的方法
Dojo Javascript 編程規(guī)范 規(guī)范自己的JavaScript書(shū)寫(xiě)