事件监听器中的函数语法[重复]

Question

我对编码还很陌生，如果这是一个有明显答案的问题，我很抱歉。

我在 JavaScript 中使用事件侦听器来切换网页上段落的显示。我可以让它工作，但对为什么某些语法无效感到困惑。

如果我输入

moreInfoButtonCourse1.addEventListener("click", toggleDisplay(course1Info));

那么什么也不会发生；该功能不起作用。但是如果我将其更改为

moreInfoButtonCourse1.addEventListener("click", () => {
  toggleDisplay(course1Info);
});

然后它就起作用了。为什么第一个选项无效但第二个选项可以？谢谢！

Answer 1

问题是，在第一个示例中，您在添加函数时调用该函数：

moreInfoButtonCourse1.addEventListener("click", toggleDisplay(course1Info));

一旦您添加事件侦听器，

toggleDisplay(courseInfo)

就会被调用，并且它可能会返回

undefined

，这就是作为函数添加的内容 - 因此当事件触发时不会调用任何函数。

您的另一个示例正在做正确的事情 - 它添加了一个调用

toggleDisplay(courseInfo)

的函数。