| 導購 | 订阅 | 在线投稿
分享
 
 
 

Javascript利用閉包循環綁定事件

2008-10-21 08:21:15  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

我們先看一個關于Javascript利用循環綁定事件的例子:

例如:一個不確定長度的列表,在鼠標經過某一條的時候改變背景。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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>

這個例子循環爲一組對象綁定事件處理函數。

但是,如果我們在這個基礎上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄?

肯能你會理所當然的這麽寫:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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>

測試一下你會發現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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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>

PS:閉包很難,很複雜!

我們先看一個關于Javascript利用循環綁定事件的例子: 例如:一個不確定長度的列表,在鼠標經過某一條的時候改變背景。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" > <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> 這個例子循環爲一組對象綁定事件處理函數。 但是,如果我們在這個基礎上增加一些需求。比如在點擊某一條記錄的時候彈出這是第幾條記錄? 肯能你會理所當然的這麽寫: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" > <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> 測試一下你會發現alert出來的都是:這是第6記錄 其實這裏for循環已將整個列表循環了一遍,並執行了i++,所以這裏i變成了6, 有什麽好的辦法解決這個問題嗎? 那就是閉包了,個人認爲閉包是js中最難捉摸的地方之一, 看看什麽是閉包: 閉包時是指內層的函數可以引用存在與包圍他的函數內的變量,即使外層的函數的執行已經終止。 可以查閱:[url=http://www.css88.com/article.asp?id=469]http://www.css88.com/article.asp?id=469[/url] 這個例子中我們可以這樣做: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" > <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> PS:閉包很難,很複雜!
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有