您當前位置：首頁 > web前端 > jscript > Javascript利用循環綁定事件的例子

Javascript利用循環綁定事件的例子

來源：程序員人生發布時間：2014-03-14 17:08:52 閱讀次數：3091次

我們先看一個關于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中最難捉摸的地方之一，

看看什么是閉包：
閉包時是指內層的函數可以引用存在與包圍他的函數內的變量，即使外層的函數的執行已經終止。

這個例子中我們可以這樣做：

以下為引用的內容：
<!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：閉包很難，很復雜！

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 IIS下配置Rewrite偽靜態組件的圖文教程

下一篇 Nginx+PHP CGI+QeePHP的rewrite配置

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

Javascript利用循環綁定事件的例子