Javascript利用閉包循環綁定事件
作者：佚名
通過舉例介紹JavaScript利用循環綁定事件，并了解閉包相關操作。
我們先看一個關于Javascript利用循環綁定事件的例子：
例如：一個不確定長度的列表，在鼠標經過某一條的時候改變背景。
﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "﹤html xmlns="﹤head﹥
﹤title﹥Untitled Page﹤/title﹥
﹤/head﹥
﹤body﹥
﹤ul id="list"﹥
﹤li﹥第1條記錄﹤/li﹥
﹤li﹥第2條記錄﹤/li﹥
﹤li﹥第3條記錄﹤/li﹥
﹤li﹥第4條記錄﹤/li﹥
﹤li﹥第5條記錄﹤/li﹥
﹤li﹥第6條記錄﹤/li﹥
﹤/ul﹥
﹤script type="text/javascript"﹥
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i ﹤= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
}
﹤/script﹥
﹤/body﹥
﹤/html﹥
﹤title﹥Untitled Page﹤/title﹥
﹤/head﹥
﹤body﹥
﹤ul id="list"﹥
﹤li﹥第1條記錄﹤/li﹥
﹤li﹥第2條記錄﹤/li﹥
﹤li﹥第3條記錄﹤/li﹥
﹤li﹥第4條記錄﹤/li﹥
﹤li﹥第5條記錄﹤/li﹥
﹤li﹥第6條記錄﹤/li﹥
﹤/ul﹥
﹤script type="text/javascript"﹥
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i ﹤= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
}
﹤/script﹥
﹤/body﹥
﹤/html﹥
這個例子循環為一組對象綁定事件處理函數。
但是，如果我們在這個基礎上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄？
可能你會理所當然的這么寫：
﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "﹤html xmlns="﹤head﹥
﹤title﹥Untitled Page﹤/title﹥
﹤/head﹥
﹤body﹥
﹤ul id="list"﹥
﹤li﹥第1條記錄﹤/li﹥
﹤li﹥第2條記錄﹤/li﹥
﹤li﹥第3條記錄﹤/li﹥
﹤li﹥第4條記錄﹤/li﹥
﹤li﹥第5條記錄﹤/li﹥
﹤li﹥第6條記錄﹤/li﹥
﹤/ul﹥
﹤script type="text/javascript"﹥
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i ﹤= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
list_obj[i].onclick = function() {
alert("這是第" + i + "記錄");
}
}
﹤/script﹥
﹤/body﹥
﹤/html﹥
﹤title﹥Untitled Page﹤/title﹥
﹤/head﹥
﹤body﹥
﹤ul id="list"﹥
﹤li﹥第1條記錄﹤/li﹥
﹤li﹥第2條記錄﹤/li﹥
﹤li﹥第3條記錄﹤/li﹥
﹤li﹥第4條記錄﹤/li﹥
﹤li﹥第5條記錄﹤/li﹥
﹤li﹥第6條記錄﹤/li﹥
﹤/ul﹥
﹤script type="text/javascript"﹥
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i ﹤= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
list_obj[i].onclick = function() {
alert("這是第" + i + "記錄");
}
}
﹤/script﹥
﹤/body﹥
﹤/html﹥
測試一下你會發現alert出來的都是：這是第6記錄
其實這里for循環已將整個列表循環了一遍，并執行了i++，所以這里i變成了6，
有什么好的辦法解決這個問題嗎？
那就是閉包了，個人認為閉包是js中最難捉摸的地方之一，
看看什么是閉包：
閉包時是指內層的函數可以引用存在與包圍他的函數內的變量，即使外層的函數的執行已經終止。
可以查閱：http://www.css88.com/article.asp?id=469
這個例子中我們可以這樣做：
﹤!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "﹤html xmlns="﹤head﹥
﹤title﹥Untitled Page﹤/title﹥
﹤/head﹥
﹤body﹥
﹤ul id="list"﹥
﹤li﹥第1條記錄﹤/li﹥
﹤li﹥第2條記錄﹤/li﹥
﹤li﹥第3條記錄﹤/li﹥
﹤li﹥第4條記錄﹤/li﹥
﹤li﹥第5條記錄﹤/li﹥
﹤li﹥第6條記錄﹤/li﹥
﹤/ul﹥
﹤script type="text/javascript"﹥
function tt(nob) {
this.clickFunc = function() {
alert("這是第" + (nob + 1) + "記錄");
}
}
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i ﹤= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
var col = new tt(i);
list_obj[i].onclick = col.clickFunc;
}
﹤/script﹥
﹤/body﹥
﹤/html﹥
﹤title﹥Untitled Page﹤/title﹥
﹤/head﹥
﹤body﹥
﹤ul id="list"﹥
﹤li﹥第1條記錄﹤/li﹥
﹤li﹥第2條記錄﹤/li﹥
﹤li﹥第3條記錄﹤/li﹥
﹤li﹥第4條記錄﹤/li﹥
﹤li﹥第5條記錄﹤/li﹥
﹤li﹥第6條記錄﹤/li﹥
﹤/ul﹥
﹤script type="text/javascript"﹥
function tt(nob) {
this.clickFunc = function() {
alert("這是第" + (nob + 1) + "記錄");
}
}
var list_obj = document.getElementById("list").getElementsByTagName("li"); //獲取list下面的所有li的對象數組
for (var i = 0; i ﹤= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
var col = new tt(i);
list_obj[i].onclick = col.clickFunc;
}
﹤/script﹥
﹤/body﹥
﹤/html﹥
【編輯推薦】
責任編輯：book05
來源：
中國IT實驗室
