本文详解为何 `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（即当前
立即学习“前端免费学习笔记（深入）”；
但注意：此时 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 解析完成后再执行（推荐将