函数调用带有addEventListener参数的循环内部

Question

问题:我想通过使用按钮的click事件传递参数来调用函数"test".

使用addEventListener ('click', test );作品.

使用addEventListener ('click', test(parameter));该功能在加载时自动激活,而不是单击按钮.

问题:如何传递参数？

//create 3 button (n is a counter):
    var btn = document.createElement("INPUT");
        btn.setAttribute("id", "demo"+n);
        btn.setAttribute("type", "button");
        btn.setAttribute("value", ("click"));
        document.body.appendChild(btn);

呼叫没有参数工作正确:

function test(m) {
    alert("YOU CLICKED ME!");
}

var m=0;
while(m!=3){
        document.getElementById("demo"+m).addEventListener("click", test);
        m=m+1;
}   

`

参数不起作用(该功能立即激活):

function test(m) {
    alert("YOU CLICKED ME!"+m);
}

var m=0;
while(m!=3){
    document.getElementById("demo"+m).addEventListener("click", test(m));
            m=m+1;
}   

Answer 1

将您的函数包装在另一个函数中以避免立即调用它

document.getElementById("demo"+m).addEventListener("click",(function(x){
    return function(){
        test(x);
    }
})(m));

在你的情况下,addEventListener需要一个函数对象,因此你不能在函数前面使用括号,因为它调用函数并传递返回值.所以你需要返回调用测试函数的函数对象(使用匿名函数来避免javascript函数的闭包属性)

编辑:使用匿名函数返回测试包装函数的原因

我们不能通过

function(){
    test(m);
}

直接添加事件.因为javascript中的每个函数对象都会记住in our case variable m它们的词法范围之外的environment().如果你只是在相同的环境(variable m)中创建不同的函数(比如在while循环中),那么它们将引用相同的环境.

您有两个使用函数工厂,以避免在循环中创建闭包,如上所述.