分析js閉包引起的事件注冊(cè)問(wèn)題

2019-11-20 10:20:00

字體：大中小

供稿：網(wǎng)友

背景：閑暇時(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;