在为元素添加事件监听器时，直接调用带参数的函数（如 `func(arg)`）会导致函数立即执行而非等待事件触发；正确做法是传入一个未执行的函数引用，或使用箭头函数/匿名函数包裹调用逻辑。
在 JavaScript 中，addEventListener() 的第二个参数必须是一个函数引用（function reference）——即一个可被后续事件触发时调用的函数对象。理解这一点是掌握事件处理语法的关键。
❌ 错误写法：立即调用函数
moreInfoButtonCourse1.addEventListener("click", toggleDisplay(course1Info));这段代码的问题在于：toggleDisplay(course1Info) 被立即执行（此时事件尚未发生），其返回值（很可能是 undefined）被当作监听器传入。由于 undefined 不是函数，点击时不会有任何响应，控制台甚至可能报错 TypeError: Listener is not a function。
? 你可以这样验证：在控制台运行 console.log(toggleDisplay(course1Info))，会发现函数已当场运行并输出结果——这显然不是我们想要的“点击时才运行”。
✅ 正确写法：传入函数引用或闭包
方式一：箭头函数（推荐，简洁清晰）
moreInfoButtonCourse1.addEventListener("click", () => {
toggleDisplay(course1Info);
});箭头函数创建了一个新的、未执行的函数体，它内部封装了对 toggleDisplay(course1Info) 的调用。当点击事件触发时，该箭头函数才被执行，从而正确调用目标函数。
方式二：传统匿名函数
moreInfoButtonCourse1.addEventListener("click", function() {
toggleDisplay(course1Info);
});语义与箭头函数完全一致，适用于需兼容旧版浏览器的场景。
立即学习“Java免费学习笔记（深入）”；
方式三：bind() 方法（显式绑定参数）
moreInfoButtonCourse1.addEventListener("click", toggleDisplay.bind(null, course1Info));bind() 返回一个新函数，预先绑定了 course1Info 作为第一个参数。注意：null 表示不绑定 this（通常事件监听器中 this 指向触发元素，若 toggleDisplay 不依赖 this，可安全设为 null）。
方式四：预定义具名函数（适合复用或调试）
function handleCourse1Click() {
toggleDisplay(course1Info);
}
moreInfoButtonCourse1.addEventListener("click", handleCourse1Click);这种方式利于调试（函数名可见）、复用和解耦，尤其适合逻辑较复杂的场景。
⚠️ 注意事项
- 避免在 addEventListener 中直接写 func(arg)，除非你明确需要立即执行并传入其返回值（极少见）；
- 若 toggleDisplay 本身需要访问事件对象（如 event.preventDefault()），请确保包装函数能透传事件：
moreInfoButtonCourse1.addEventListener("click", (e) => { e.preventDefault(); toggleDisplay(course1Info); }); - 多个按钮共用同一逻辑？考虑使用事件委托或动态参数提取（如通过 data-* 属性），避免重复绑定。
掌握函数何时被调用（invocation）与何时被传递（reference），是 JavaScript 异步编程和事件处理的基石。从今天起，牢记：addEventListener 要的是“将来要做的事”，而不是“现在就做完的事”。
