js動態循環綁定事件的變量問題

在編寫JS的時候我們經常會遇到要對一系列元素進行事件綁定，循環對元素的事件進行賦值，在這個過程中我們會遇到一個問題，那就每個元素事件運行的時候變量怎么都是相同的值。

這里涉及到變量的作用域的問題，可以用閉包來解決這個問題。

這里舉個簡單的列子來說明：

<ul id="ulDemo">
　　<li>數據</li>
　　<li>數據</li>
　　<li>數據</li>
　　<li>數據</li>
　　<li>數據</li>
</ul>

我們來給這些li添加一個onclick事件，彈出li是第幾條數據

       var list = document.getElementById("ulDemo").getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            var li = list[i];
            li.onclick= function () {
                alert("第" + (i + 1) + "條" + this.innerHTML);
            }
        }

結果彈出的都是第6條數據，這里的onclick函數中的變量i指向的內存地址，經過循環之后i變成了5，所有的li的點擊事件都在同一個作用域中，我們可以通過閉包把i的作用域獨立出來

  var list = document.getElementById("ulDemo").getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            var li = list[i];
            li.onclick= (function (index) {
                return function () { alert("第" + (index + 1) + "條" + this.innerHTML) };
            })(i);
        }

其他寫法

 for (var i = 0; i < list.length; i++) {
            var li = list[i];

            var addClick = function (el, index) {
                el.onclick= function () { alert("第" + (index + 1) + "條" + this.innerHTML) };
            };

            addClick(li, i);
        }

　　

 for (var i = 0; i < list.length; i++) {
            var li = list[i];

            (function (el,index) {
                el.onclick= function () { alert("第" + (index + 1) + "條" + this.innerHTML) };
            })(li,i);
        }