本文详解为何 `addeventlistener("change", loadpost(period.value))` 不触发，以及如何通过箭头函数或匿名函数正确传递参数，实现下拉菜单选择后动态显示对应内容区块。
在原代码中，问题核心在于事件监听器的写法：
period.addEventListener("change", loadPost(period.value));这行代码立即执行了 loadPost(period.value)（此时 period.value 很可能是初始值 "day"），并将它的返回值（undefined）作为回调函数传入 addEventListener —— 而不是将一个函数引用传进去。因此事件处理器仅运行一次（页面加载时），后续任何下拉选择均无法触发，console.log(period) 也只输出一次。
✅ 正确做法是：传入一个函数引用，该函数在 change 事件发生时才被调用，并能读取当前选中的值。
✅ 推荐解决方案（使用箭头函数）
period.addEventListener("change", () => loadPost(period.value));箭头函数创建了一个闭包，在每次 change 触发时动态获取 period.value（即当前 <select> 的选中值），再传给 loadPost()。
立即学习“前端免费学习笔记（深入）”；
但注意：此时 loadPost() 接收的是字符串（如 "day"），而原逻辑中却用 case day:（变量引用）进行比对 —— 这会导致所有 switch 分支都不匹配。需同步修正函数逻辑：
✅ 完整修复后的 JavaScript（含优化）
const day = document.getElementById("day");
const week = document.getElementById("week");
const month = document.getElementById("month");
const periodSelect = document.getElementById("filter");
// 隐藏所有内容块
function hideAll() {
day.style.display = "none";
week.style.display = "none";
month.style.display = "none";
}
// 显示指定 ID 的内容块
function showById(id) {
hideAll();
const el = document.getElementById(id);
if (el) el.style.display = "block";
}
// 主处理函数：接收选项值（字符串），如 "day"
function loadPost(value) {
console.log("Selected period:", value); // ✅ 现在每次切换都会输出
switch (value) {
case "day":
showById("day");
break;
case "week":
showById("week");
break;
case "month":
showById("month");
break;
default:
hideAll();
}
}
// ✅ 正确绑定事件：传入函数，而非函数调用结果
periodSelect.addEventListener("change", () => loadPost(periodSelect.value));⚠️ 注意事项与最佳实践
- 避免重复声明变量：原代码中 var period = ... 后又定义同名函数参数 function loadPost(period)，造成作用域混淆；应改用不同名（如 value 或 selectedValue）。
- DOM 加载时机：确保脚本在 HTML 解析完成后再执行（推荐将 <script> 放在 </body> 前，或使用 DOMContentLoaded 事件）。
- 可扩展性增强：若未来新增更多周期（如 "year"），只需添加 <option> 和 case 分支，无需修改事件绑定逻辑。
- 健壮性补充：showById() 中加入 if (el) 判断，防止因 ID 不存在导致报错。
这样，下拉菜单即可真正响应用户操作，按需显示对应时间段的内容区块，逻辑清晰、易于维护。
