在編寫事件的時候，我們難免會遇到以下這種情況：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>內容一</li>
<li>內容二</li>
<li>內容三</li>
<li>內容四</li>
<li>內容五</li>
<li>內容六</li>
</ul>
</body>
<script>
window.onload=function(){
var oli = document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].onclick=function(){
alert(i);
}
}
}
</script>
</html>
每次點擊都會彈出6，而不是0,1,2,3,4,5,6
這是什么原因造成的呢？
下面做下分析：因為在for循環里面指定給oli[i].onclick的事件處理程序，也就是onclick那個匿名函數是在for循環執行完成后（用戶單擊鏈接時）才被調用的。
而調用時，需要對變量i求值，解析程序首先會在事件處理程序內部查找，但i沒有定義。然后，又到方法外部去查找，此時有定義，但i的值是6（只有i大於6才會停止執行for循環）。
因此，就會取得該值——這正是閉包（匿名函數）要使用其外部作用域中變量的結果。而且，這也是由於匿名函數本身無法傳遞參數（故而無法維護自己的作用域）造成的。
怎么解決這個問題呢？
方案一、我們可以采用給對象自定義屬性的方法；代碼如下:
var oli = document.getElementsByTagName('li');
for (var i = 0; i < oli.length; i++) {
oli[i].index=i;
oli[i].onclick=function(){
alert(this.index);
}
}
再次運行，我們會發現，此時依次點擊就會彈出0,1,2,3,4,5；
方案二、采用閉包的思
var oli = document.getElementsByTagName('li');
for (var i = 0; i <= oli.length; i++) {
(function(i){
oli[i].onclick = function() {
alert(i);
}
})(i);
}
同樣解決問題
