JavaScript事件监听器能否直接调用已声明函数？及原因咨询

嘿，这个问题的核心其实是搞混了函数引用和函数调用的区别，咱们来一步步理清楚：

首先看你遇到的问题：例3里你写了my_button.addEventListener("click", func_a())，这时候你不是把函数传给事件监听器，而是立刻执行了func_a()，然后把这个函数执行后的返回值（这里因为func_a没有return语句，所以默认返回undefined）传给了addEventListener。浏览器拿到的是undefined，自然不会在点击时触发函数——反而代码一运行就先执行了一次func_a，这就是你说“只会执行一次”的原因。

那正确的做法是什么呢？对比你的前两个例子：

• 例1里，你传的是一个匿名函数的引用（function() { ... }），浏览器知道要在点击事件触发时，再去调用这个函数。
• 例2里，你把命名函数My_Click的引用存在变量func_a里，然后把func_a传给监听器——本质也是传函数引用，点击时才会触发执行。

所以如果要直接用已声明的命名函数，你只需要传函数名本身（不要加括号）：

function func_a() { console.log("Click Occured"); }
my_button.addEventListener("click", func_a); // 这样就可以正常触发啦！

额外补充个小知识点：如果你的函数需要传递参数，那可以用匿名函数包裹一下，比如：

function func_a(msg) { console.log(msg); }
my_button.addEventListener("click", () => func_a("点击触发啦！"));

这样点击时才会带着参数调用func_a，不会提前执行。

内容的提问来源于stack exchange，提问作者rzk666