標籤：title 匿名 運行 定義 for 而不是 click pre 處理常式
在編寫事件的時候，我們難免會遇到以下這種情況：
<!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);
}
同樣解決問題
js中關於動態添加事件，不能使用迴圈變數的問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
