記得第一次面試前端工程師的時候，面試官出了一個機試題，要求每個p單擊時彈出不同的值，我是這么寫的，執行的時候發現每次都是alert(5)，當時堅持認為我的代碼沒有任何問題，心想這么簡單的功能我怎么會弄錯。時至今日，想起這件事，便寫篇博文總結之。
<!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]的屬性值。