記得第一次面試前端工程師的時候,面試官出了一個機試題,要求每個p單擊時彈出不同的值,我是這麼寫的,執行的時候發現每次都是alert(5),當時堅持認為My Code沒有任何問題,心想這麼簡單的功能我怎麼會弄錯。時至今日,想起這件事,便寫篇博文總結之。
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>面試試題</title><script type="text/javascript"> function init() { var pArr = document.getElementsByTagName("p"); for( var i=0; i<pArr.length; i++ ) { pArr[i].onclick = function() { alert(i); } }}</script> </head> <body onload="init();"> <p>段落1</p> <p>斷落</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> </body> </html>
執行以上的代碼,會發現一個有趣的現象,每次單擊p時彈出的結果都是5,究竟為什麼呢,而不是0,1,2,3,4?我想發表一下個人見解:
以上代碼是在onload的時候執行了init方法,即已經為每個P添加了單擊事件監聽,當我們單擊P時,其實i的值此時已經是5了(這其實是一個程式執行的時間問題,在我們單擊P之前,迴圈已經執行完畢,i的值最後變成了5退出了迴圈,如果我們可以做到在一個p添加單擊時間之後和下一個p添加單擊事件之前單擊p的話,肯定得到的是0,1,2,3,4這樣的結果,但是我們的速度不可能超過程式執行的速度,所以迴圈執行完後,i其實最後是5了,我們以後的單擊都會alert(5),不知各位看官理解了沒有)。
如果我們想每次單擊都alert不同的值,我們可以參考下面這個簡單可行的方法:
function init() { var pArr = document.getElementsByTagName("p"); for( var i=0; i<pArr.length; i++ ) { pArr[i].i=i; pArr[i].onclick = function() { alert(this.i); } }}
我們可以在迴圈添加單擊事件時,將i的值存放到p裡面(因為p是一個DOM對象,既然是對象,就可以添加屬性和方法,這裡我們為p添加一個屬性i,賦值為i),最後我們每次單擊p的時候alert的總是p[i]的屬性值。