脚本不等待 onclick 事件 [重复]答案

【问题标题】：Script doesn't wait for onclick event [duplicate]脚本不等待 onclick 事件 [重复]
【发布时间】：2018-03-08 19:35:15
【问题描述】：

在下面的代码中，为什么页面加载时标题文本会发生变化，而不仅仅是在单击按钮后？

<h1 id="header">This is a header</h1>
<button id="btn1">Change text</button>
<script>
  function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}

button1 = document.getElementById("btn1")
button1.onclick = change_text("header", "something")
</script>

【问题讨论】：

您将 onclick 设置为函数执行而不是函数定义。因此，当定义 onclick 时，它将执行该功能。所以你会想要更像： button1.onclick = function() { change_text("header", "something"); }
因为您将 onclick 设置为运行该函数的函数。这不是您执行此任务的方式。
另一个重复的，特定于事件处理程序：Why does click event handler fire immediately upon page load?

标签： javascript html

【解决方案1】：

如果您想重用该功能并将 onclick 排除在标记之外，您可以这样做：

<h1 id="header">This is a header</h1>
<button id="btn1">Change text</button>
<script>
function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}

button1 = document.getElementById("btn1")
button1.onclick = function () {
    change_text("header", "something");
}
</script>

这使用了一个叫做anonymous function的东西。

在此处了解更多信息：JavaScript Functions

【讨论】：

【解决方案2】：

问题是这一行：

button1.onclick = change_text("header", "something")

JS引擎会按照这个顺序做以下事情：

使用参数"header" 和"something" 调用change_text
将change_text（本例中为undefined）的结果赋值给button1.onclick

Jane Doe's answer 应该可以工作。如果您想保留当前的代码结构，则可以使用以下代码：

button1.onclick = function(){
    change_text("header", "something");
};

这会创建一个anonymous function 并将其分配给onclick。当onclick被触发时，会执行调用change_text的函数。

【讨论】：

【解决方案3】：

你可以试试：

<h1 id="header">This is a header</h1>
<button onclick="change_text('header', 'something')" id="btn1">Change text</button>
<script>
  function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}
</script>

我非常有信心这将按您的预期工作..

【讨论】：

【解决方案4】：

原因很简单：您已经在代码中调用了change_text("header", "something")。你基本上在做同样的事情：

let res = change_text("header", "something") // already called, res is undefined
button1.onclick = res

如果您实际上传递了一个事件处理程序，它应该看起来像button1.onclick = change_text，而change_text() 将event 作为参数。或者在另一个答案中看到，<button onclick="change_text('header', 'something')" id="btn1">Change text</button>（这会创建一个匿名函数，将在点击事件时调用）

【讨论】：