【问题标题】：Why does my JavaScript automatically execute functions? [duplicate]为什么我的 JavaScript 会自动执行函数？ [复制]
【发布时间】：2016-03-15 21:50:23
【问题描述】：

var season = "10";

$( document ).ready(function() {
    $("#table").hide();
});

$('#searchButton').on("click", showTable(event));

function showTable(event){
    $("#table").show();
    document.getElementById("td").innerHTML = season;     
}

如何在页面加载时自动执行函数 showTable(event)？另一个问题是，如果单击按钮，则单击事件不起作用。我做错了什么？

【问题讨论】：

通过在 onclick 调用中加上括号，您正在调用要作为变量传递的函数，尝试类似：$('#searchButton').on("click", showTable);

标签： javascript jquery html function

【解决方案1】：

如何在页面加载时自动执行函数 showTable(event)？

因为您正在调用函数：showTable(event)。函数引用后的() 表示执行该函数。您正在调用 showTable 并将返回值 (undefined) 传递给 .on()。

这是一个简化的例子：

function foo() {
  return 42;
}

function bar(x) {
  console.log(x);
}

bar(foo());

这会调用函数foo，并将其返回值(42) 传递给bar，后者又会记录该值。

如果我们改为写bar(foo)，我们将传递函数本身，bar 可以执行该函数。

我做错了什么？

你正在调用这个函数。将其传递给.on 并让浏览器调用它：

$('#searchButton').on("click", showTable);

【讨论】：

一个可行的解决方案，但对这个解决方案的一个小警告是，如果您的点击处理程序有其他参数传递给它，您不能以这种方式使用它，必须按照我的回答显示。
当然，不同的问题有不同的解决方案。
是的，我只是向 OP 提及 - 我不是反对者。您对提出的问题有一个完全可行的解决方案
它工作得很好。谢谢！

【解决方案2】：

行：

$('#searchButton').on("click", showTable(event));

实际执行showTable(event)。你想要的是：

$('#searchButton').on("click", showTable);

为什么？

当您有$('#searchButton').on("click", showTable(event)); 时，发送到.on() 的是showTable(event) 函数执行的结果。

如果您使用$('#searchButton').on("click", showTable);，则作为第二个参数发送给.on() 函数的内容现在是对showTable 函数的引用，而不是其结果。

【讨论】：

一个可行的解决方案，但对此解决方案的一个小警告是，如果您的点击处理程序有其他参数传递给它，您不能以这种方式使用它，必须按照我的回答显示。
当然，如果。不过，情况似乎并非如此。
是的，我只是向 OP 提及 - 我不是反对者。您对提出的问题有一个完全可行的解决方案

【解决方案3】：

通过说 showTable(event)，您正在调用该函数。

你需要做的是：

$('#searchButton').on("click", function (event) {
  showTable(event)
});

【讨论】：

一个可行的解决方案，但对这个解决方案的一个小警告是，OPs 问题中的事件变量没有任何作用，因此没有必要使用这种语法;)