在为元素添加事件监听器时，直接调用函数（如 `addevent("click", fn(arg))`）会导致函数立即执行而非等待事件触发，正确做法是传入未执行的函数引用或使用箭头函数/匿名函数包裹。
在 JavaScript 事件处理中，addEventListener 的第二个参数必须是一个函数引用（function reference），即一个“待执行的函数”，而不是函数的执行结果。这是理解本问题的关键。
❌ 错误写法：立即调用函数
moreInfoButtonCourse1.addEventListener("click", toggleDisplay(course1Info));这段代码中，toggleDisplay(course1Info) 立刻被执行（此时页面刚加载、甚至按钮尚未点击），其返回值（通常是 undefined，除非 toggleDisplay 显式返回一个函数）被当作事件处理函数传入。由于 undefined 不是可调用函数，点击事件触发时实际无操作，控制台可能静默失败或报错 TypeError: listener is not a function。
✅ 正确写法一：箭头函数（推荐，清晰易读）
moreInfoButtonCourse1.addEventListener("click", () => {
toggleDisplay(course1Info);
});箭头函数创建了一个新的、延迟执行的函数体。当用户点击时，该函数才被调用，并在其内部执行 toggleDisplay(course1Info) —— 参数 course1Info 在定义时已捕获（闭包），确保上下文正确。
✅ 正确写法二：传统匿名函数
moreInfoButtonCourse1.addEventListener("click", function() {
toggleDisplay(course1Info);
});语义与箭头函数完全一致，适用于需兼容旧版浏览器的场景。
立即学习“Java免费学习笔记（深入）”；
✅ 正确写法三：bind() 方法（适合复用场景）
moreInfoButtonCourse1.addEventListener("click", toggleDisplay.bind(null, course1Info));bind() 返回一个新函数，预先绑定 course1Info 作为第一个参数。点击时自动以 toggleDisplay(course1Info) 方式调用。注意：bind(null, ...) 中 null 表示不绑定 this，若 toggleDisplay 依赖 this，请替换为对应上下文对象。
⚠️ 注意事项
- 避免在 addEventListener 中写 fn(arg) 或 fn.call(...) 等带括号的表达式，除非你明确需要立即执行；
- 若需传递动态参数（如循环中为多个按钮绑定不同内容），优先使用闭包（箭头函数）或 data-* 属性 + 事件委托；
- 使用箭头函数时，this 指向外层作用域，不影响事件处理逻辑；若需访问触发事件的元素，可通过 event.currentTarget 或 event.target 获取。
✅ 小结
事件监听器期待的是“将来执行什么”，而非“现在执行完的结果”。牢记：传函数，不传调用；要引用，不要执行。掌握这一原则，就能避开大量看似神秘的“点击无反应”问题。
