Javascript 为什么listner函数在没有单击事件的情况下运行？

（给主持人的说明-这里回答了一个类似的问题。虽然问题已经解决，但缺少关于问题原因的适当解释）

问题-

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

constlinkvar=document.getElementById（“theLink”）；
linkVar.addEventListener（“单击”，Listener函数）；
函数listnerFunction（）{
警报（“案例1”）；
}

---

执行此操作时：

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

您正在将调用

listnerFunction（“案例2”）

的结果传递给

addEventListener

而不是像第一种情况那样传递函数本身

您要做的是：

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

---

当您在函数引用之后使用parenthis时，如so

functionName（）

，您告诉JS使用名称

functionName

调用函数。因此，在您的情况下，在添加事件侦听器时调用的是

listnerFunction（）

：

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

因此，这实际上评估为：

inkVar.addEventListener("click", undefined);

As

listnerFunction（“案例2”）

返回

未定义的

（因为它没有返回任何内容）

为了完成所要完成的工作，您可以将函数调用包装在自己的（匿名）函数中，这样（匿名）函数就可以执行您的函数调用，然后该函数调用就可以传递所需的参数：

inkVar.addEventListener("click", function() {
  listnerFunction("Case 2");
});

---

const listenerFunction=text=>（）=>警报（text）

-您必须将第一个更改为

listenerFunction（'case 1'）

-或者您可以使用默认参数，

const listenerFunction=（text=“defaultText”）=>（）=>警报（text）