Javascript利用閉包循環綁定事件

我們先看一個關于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學習筆記 4-循環 Loops
學過C語言的人,對此應該熟悉,完全是一樣的,一個簡單的while循環例子:簡單的while循環<html><head><title>簡單的while循環例子</title><script language="javascript"><!--hide...查看完整版>>JavaScript學習筆記 4-循環 Loops
 
javascript - 狀態欄大小寫循環轉換
var text="歡迎訪問王朝網絡 -- http://wap.wangchao.net.cn" var speed=50 var x=0 function bb() { var a=text.substring(0,x) var b=text.substring(x,x+1).toUpperCase() var c=text.substring(x+1,text.leng...查看完整版>>javascript - 狀態欄大小寫循環轉換
 
javascript捕獲窗口關閉事件
function window.onbeforeunload() { if (event.clientX>document.body.clientWidth && event.clientY<0 ||event.altKey) window.event.returnValue="確定要退出本頁嗎?"; } 循環多次if (e...查看完整版>>javascript捕獲窗口關閉事件
 
JavaScript利用ActiveX導出Excel,Word
<HTML> <HEAD> <title>WEB頁面導出爲EXCEL文檔的方法 </title> </HEAD><body><BR><table id = "PrintA" width="100%" border="1" cellspacing="0" cellpaddin...查看完整版>>JavaScript利用ActiveX導出Excel,Word
 
JavaScript[對象.屬性]集錦、事件查詢綜合
<SCRIPT>標記  用于包含JavaScript代碼.  語法  <SCRIPT LANGUAGE="JavaScript">  <!--hide  code here  //-->  </SCRIPT> 屬性  LANGUAGE 定義腳本語言  SRC 定義一個UR...查看完整版>>JavaScript[對象.屬性]集錦、事件查詢綜合
 
javaScript事件使用方法
DOM編程1JAVASCRIPT將浏覽器本身,網頁文檔,以及網頁文檔中的HTML元素等都用相應的內置對喜愛那個來表示,這些對象及對象之間的層次關系統稱爲DOM(Document Object Model,文檔對象模型)DHTML2CSS,腳本編程語言和D...查看完整版>>javaScript事件使用方法
 
利用JavaScript獲取屏幕分辨率的方法
有的時候我們可能需要了解浏覽者所使用的顯示器分辨率,從而幫助我們網頁設計們了解浏覽者的一些情況,下面就簡單介紹一下利用JavaScript獲取屏幕分辨率的方法。 <script type="text/javascript" language="javas...查看完整版>>利用JavaScript獲取屏幕分辨率的方法
 
JavaScript控制鼠標滑輪事件
<script language="JavaScript"><!--//document.body.onmousewheel = function(){alert('你在滾,哈哈');}function img_zoom(e, o){ //圖片鼠標滾輪縮放 var zoom = parseInt(o.style.zoom, 10) || 100; ...查看完整版>>JavaScript控制鼠標滑輪事件
 
使用JavaScript事件綜合查詢
  click() 對象.click() 使對象被點擊。  closed 對象.closed 對象窗口是否已關閉true/false  clearTimeout(對象) 清除已設置的setTimeout對象  clearInterval(對象) 清除已設置的setInterval對象  confir...查看完整版>>使用JavaScript事件綜合查詢
 
 
回到王朝網路首頁