Question

当我创建一个应该在onclick事件之后运行的函数并且函数没有参数时它工作正常 - 单击按钮后启动该函数。但是当我想传递一些参数时，该函数在加载页面后立即运行而不单击按钮。请参阅两个代码：

<script>
var hash_btn = document.getElementById("btn_hash");
var hash_txt = document.getElementById("txt_hash");

var test_f = function(txt)
{
  alert('hello');
}

// this alerts 'hello' after clicking the button
hash_btn.onclick = test_f; 

// this alerts 'hello' immediately without clicking the button
hash_btn.onclick = test_f('whatever');

</script>
<html>
<input type="text" id="txt_hash" />
<input type="button" id="btn_hash" value = "Hash"/>
</html>

Answer 1

当你运行这一行时，你基本上是说，该函数应该被调用，而不是分配：

hash_btn.onclick = test_f('whatever');

一种可能的解决方案是将其实际添加到HTML标记中。使用它只是为了确认您的情况和当前问题。正如下面所评论的那样，当你继续编码时，它会有一些你想要避免的缺点：

<input type="button" id="btn_hash" value = "Hash" onclick="test_f('whatever')"/>

Answer 2

通过编写hash_btn.onclick = test_f(arg);，您可以执行该功能。这就像写作

var result = calculate(5,10);，它将返回计算结果。

如果要将函数分配给onclick-handler，则需要为其提供所需函数的引用。

element.onclick = functionRef;

其中functionRef是一个函数 - 通常是在别处声明的函数的名称或函数表达式。

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

在代码中：

hash_btn.onclick = () => { test_f('yourArgument'); };

在HTML中（不推荐）：

<input type="button" onclick="test_f('yourArgument')"/>

带有和不带参数的Javascript onclick函数

2 个答案: