对于function(），带有addEventListener的循环不是动态的

Loop with addEventListener is not dynamic for function()

本文关键字：循环 动态 addEventListener 带有 function 对于      更新时间：2024-02-01

我想让循环非常容易地为每个按钮调用具有不同参数的函数。但是，当我运行调用并单击按钮时，eventListener函数saveList（listIdx）只返回函数saveList"5"。请看一下我的问题和疑难解答。

    for (var listIdx = 0; listIdx < count; listIdx++ ) {
            console.log("setting the variable" + "myButton" + listIdx );
            document.getElementById("myButton" + listIdx).addEventListener("click", function() { saveList(listIdx); 
            });
    }

尝试1：向函数添加参数（）调用

    for (var listIdx = 0; listIdx < count; listIdx++ ) {
            console.log("setting the variable" + "myButton" + listIdx );
            document.getElementById("myButton" + listIdx).addEventListener("click", function(listIdx) { saveList(listIdx); 
            });
    }

尝试2：元素上的包装

    for (var listIdx = 0; listIdx < count; listIdx++ ) {
            console.log("setting the variable" + "myButton" + listIdx );
            document.getElementById("myButton" + listIdx).addEventListener("click", function(_listIdx) { saveList(_listIdx); 
            });
    }

问题是函数在稍后的时间点被调用——在for循环完成之后。正文中包含的变量已在for循环的最后一次迭代中更新。这就是你所看到的。

解决方法是以某种方式将变量推送到函数内部。

function makeListSaver(index) {
    /* return a brand new function that has captured the index when this function 
       was invoked
    */
    return function() { 
        saveList(index);
    }
}

然后做，

document.getElementById("myButton" + listIdx).addEventListener("click", makeListSaver(listIdx))

或者简单地说，

document.getElementById("myButton" + listIdx).addEventListener("click", (function(index){
   return function() { saveList(index); }
})(listIdx));

你必须稍微了解一下闭包以及它们是如何工作的。

你可以这样做。。。

for (var listIdx = 0; listIdx < count; listIdx++ ) {
           applyEvent(listIdx);
    }
function applyEvent(listIdx)
{   
        document.getElementById("1" + listIdx).addEventListener("click", function({                
              saveList(listIdx); 
        });
}

工作Fiddle

问题在于循环。

这里是如何在for循环中设置addEventListener的快速示例。

http://jsbin.com/kavowucimi/1/

它是如何工作的：

  • 页面加载时
  • 查找类为obj的所有元素
  • 为每个元素添加一个事件侦听器单击
  • 当用户单击时，所选元素的警报id
<script>
    window.app = {
        start: function(){
            var elms = document.querySelectorAll('.obj');
            for (var i = 0; i < elms.length; i++ ) {
                var t = elms[i];
                var elm = document.getElementById(t.id);
                elm.addEventListener('click', function(item){
                    alert(item.currentTarget.id);
                });
            }
        }
    };
    </script>
<body onload="window.app.start();">
<div id=1 class="obj">1</div>
<div id=2 class="obj">2</div>
<div id=3 class="obj">3</div>
相关文章：