javascript - 带参数的 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);
}

或使用 bind

document.getElementById('main_div').onclick = yourFunc.bind(this, [argument1, argument2]);

然而，通常最好使用 addEventListener附加事件监听器，但同样的原则适用，它是(不带参数)

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

或 bind或传递参数等的匿名函数。

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