addEventListener 函数在开始时工作而不会被触发[重复]答案

【问题标题】：addEventListener function works at the beginning without being fired [duplicate]addEventListener 函数在开始时工作而不会被触发[重复]
【发布时间】：2018-11-07 19:29:13
【问题描述】：

这是我的 HTML 代码：

document.getElementById("sub").addEventListener("click", testing());
function testing() {
 document.getElementById("demo").innerHTML ="good"; 
}

<input type="submit" value="Place Order" id="sub"/>
    </fieldset> </form>
    <p id="demo"></p>
    <script type="text/javascript" src="Q4.js"></script>

我在其中声明了一个按钮来提交表单。我在提交按钮中添加了一个事件来运行函数testing()。我预计当用户点击按钮提交时，页面会提示“好”。但是，一旦我加载页面，“好”就已经出现了，而无需单击按钮。 result page

为什么会这样？

【问题讨论】：

在.addEventListener() 调用中，testing() 应该只是testing。您的代码调用函数，然后将返回值传递给.addEventListener()。
JavaScript 急切地评估参数。如果您有foo(bar())，则首先调用bar，并将其返回值传递给foo。
副本使用jQuery，但问题相同。

标签： javascript html dom

【解决方案1】：

您应该删除括号以防止函数testing() 被执行。只需输入函数的名称。

您可以找到更多详细信息和简单的example of listener here。

这是一个工作的sn-p：

/*file javaScript Q4.js*/
document.getElementById("sub").addEventListener("click", testing);
function testing() {
document.getElementById("demo").innerHTML ="good"; }

<input type="submit" value="Place Order" id="sub"/>
</fieldset> </form>
<p id="demo"></p>
<script type="text/javascript" src="Q4.js"></script>

你也可以把你的函数直接放到你的监听器中，像这样：

document.getElementById("sub").addEventListener("click", function() {
    document.getElementById("demo").innerHTML="good"; 
});

关于“只显示good这个词”的错误： 单击按钮会导致表单被提交，这意味着页面重新加载或加载 URL 正在运行。这意味着所有 JavaScript 在当前页面加载中所做的临时更改是走了。 谢谢Felix Kling

【讨论】：

我试图这样做。但后来有点奇怪。我点击“下订单”，然后我看到“好”弹出 1 秒，然后又消失了。那是我浏览器的问题吗？
@Duke_ngn 这可能是来自您代码的另一部分的错误。你能分享Minimal, Complete, and Verifiable example，或更多代码吗？ :)
我的代码中什么都没有了。该按钮位于表单的字段集中。其他部分只是一个表格和一个文本框。
Q4.js 只包含那 3 行？
@Duke_ngn: "按钮在表单的字段集中。" 点击按钮会导致表单被提交，这意味着页面重新加载或加载 URL在action。这意味着 JavaScript 在当前页面加载中所做的所有临时更改都消失了。此处的示例可能有效，因为您发布了不完整的 HTML，因此该按钮实际上不在 <form> 内。

【解决方案2】：

改变这一行：

document.getElementById("sub").addEventListener("click", testing());

到

document.getElementById("sub").addEventListener("click", testing);

【讨论】：

【解决方案3】：

addEventListener函数接受两个参数

事件名称
回调函数
选项（可选）

所以你调用了函数，尽管在那里传递了函数引用。

像下面这样写下来

document.getElementById("sub").addEventListener("click", testing);

或

document.getElementById("sub").addEventListener("click", function testing() {
    document.getElementById("demo").innerHTML ="good"; 
})

【讨论】：

出于好奇，如果您将函数用作闭包，是否还有理由命名该函数？
@War10ck yupe，你可以在stacktrace中看到函数名，很容易理解你在调试什么，可读性更好:)
好点！我没有想到。 +1

【解决方案4】：

你不需要括号。

document.getElementById("sub").addEventListener("click", testing);

【讨论】：

你的意思是括号