js动态循环绑定事件的变量问题

女爷i 2021-12-12 23:47 391阅读 0赞

在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定，循环对元素的事件进行赋值，在这个过程中我们会遇到一个问题，那就每个元素事件运行的时候变量怎么都是相同的值。

这里涉及到变量的作用域的问题，可以用闭包来解决这个问题。

这里举个简单的列子来说明：

我们来给这些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的作用域独立出来

其他写法

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);
           }