onclick分配带参数的函数

Question

我不确定之前是否曾经问过,因为我不知道它叫什么.

但为什么像这样的方法不起作用呢？以下只是一个例子

<script>
document.getElementById('main_div').onclick=clickie(argument1,argument2);

function clickie(parameter1,parameter2){
 //code here
}

</script>

如果在没有参数的情况下分配事件处理程序,上面的代码可以正常工作,但是使用参数,它不起作用.我想我在网上看到,要解决这个问题,你可以使用闭包.我假设它是因为括号()立即调用函数而不是将其分配给事件？

Answer 1

因为您正在立即调用该函数并返回结果,而不是引用它.

添加括号时,您调用该函数并将结果传递回onclick

document.getElementById('main_div').onclick = clickie(); // returns undefined

所以它实际上等于写作

document.getElementById('main_div').onclick = undefined;

这不是你想要的,你想要的

document.getElementById('main_div').onclick = clickie;

但是你不能传递参数,所以要做到这一点你也必须使用匿名函数

document.getElementById('main_div').onclick = function() {
    clickie(argument1,argument2);
}

并且通常最好使用addEventListener来附加事件侦听器,但同样的原则适用,它是(没有参数)

document.getElementById('main_div').addEventListener('click', clickie, false);

或传递参数的匿名函数

document.getElementById('main_div').addEventListener('click', function() {
    clickie(argument1,argument2);
}, false);

Answer 2

最简单的方法是：

yourElement.onclick = yourFunc.bind(this, [arg1, arg2]);

function yourFunc (args, event) {
    // here you can work with you array of the arguments 'args'
}