JavaScript事件监听器函数语法疑问：两种写法为何效果不同？

这俩写法的核心区别在于事件监听器需要接收的是函数引用，不是函数执行结果：

• 第一种写法moreInfoButtonCourse1.addEventListener("click", toggleDisplay(course1Info));里，toggleDisplay(course1Info)是直接执行了这个函数，把它的返回值（如果你的toggleDisplay没写return语句，返回值就是undefined）传给了addEventListener。点击按钮时，浏览器会尝试调用这个传入的返回值（也就是undefined），自然没反应。

• 第二种箭头函数的写法，() => { toggleDisplay(course1Info); }是创建了一个新的匿名函数，把这个函数的引用传给了事件监听器。当按钮被点击时，浏览器才会执行这个匿名函数，进而调用toggleDisplay(course1Info)，这才是符合预期的触发时机。

另外还有一种替代写法，用bind来绑定参数，效果和箭头函数一致：

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

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