Question

（给主持人的笔记-在这里stackoverflow link也回答了类似的问题。尽管问题已解决，但对于引起问题的原因却没有适当的解释）

问题-

下面是简单的代码。点击链接时会显示警报。

const linkVar = document.getElementById("theLink");
linkVar.addEventListener("click", listnerFunction);

function listnerFunction() {
  alert("case 1");
}

<a id="theLink" href="#">click here to call the listner function</a>

接下来，进行一个小的更改，我想在调用函数时传递警报文本。

const linkVar = document.getElementById("theLink");
linkVar.addEventListener("click", listnerFunction("Case 2"));

function listnerFunction(passedText) {
  alert(passedText);
}

<a id="theLink" href="#">click here to call the listner function</a>

这种情况2导致了问题。现在开始运行案例2的代码。警报显示时无需单击，单击警报时则不会显示。

问题-当参数传递给侦听器函数时，真正发生了什么？

Answer 1

https://*.cloudfronts.net的语法用于调用名称为functionName()的函数。因此，就您而言，添加事件监听器时您正在呼叫functionName：

listnerFunction()

因此，这的确是：

// --------------------------------\/\/\/\/\/\/\/\/ -- executes listnerFunction()
inkVar.addEventListener("click", listnerFunction("Case 2"));

inkVar.addEventListener("click", undefined);返回listnerFunction("Case 2")（因为没有返回任何内容）

为了执行您要执行的操作，可以将函数调用包装在其自己的（匿名）函数中，以便（匿名）函数可以执行您的函数调用，然后该函数调用可以通过所需的参数传递： / p>

undefined

Answer 2

执行此操作时：

    linkVar.addEventListener("click", listnerFunction("Case 2"));

您正在将调用listnerFunction("Case 2")传递给addEventListener的结果，而不是像在第一种情况下那样。

您要执行的操作是这样：

    linkVar.addEventListener("click", () => listnerFunction("Case 2"));

为什么列表器功能在没有click事件的情况下运行？

2 个答案: