本文详解 select 下拉框 change 事件不触发的根本原因——错误地在 addeventlistener 中直接调用函数而非传入回调，提供可立即修复的解决方案，并附带完整、健壮的切换显示逻辑示例。
在使用原生 javaScript 开发时，
你原始代码中的关键问题就在这里：
period.addEventListener("change", loadPost(period.value));这段代码会在页面加载时立即执行一次 loadPost(period.value)（此时 period.value 很可能为空或默认值），并将它的返回值（undefined）作为事件处理器注册。因此后续任何下拉选择操作都不会触发函数——因为根本没有有效的回调函数被绑定。
✅ 正确做法是：传入一个函数引用或内联回调函数，确保它只在用户触发 change 事件时才执行。推荐使用箭头函数封装：
立即学习“前端免费学习笔记（深入）”；
period.addEventListener("change", () => loadPost(period.value));这样，每次选项变更时，箭头函数才会被调用，并读取当前最新的 period.value 值传给 loadPost。
此外，原逻辑中 loadPost 函数的 switch 判断存在根本性错误：它在比较 period 参数（字符串 “day”/”week”/”month”）与 dom 元素引用（day, week, month 变量）——二者类型不同，永远不匹配。应改为基于字符串值判断：
function loadPost(value) { // 隐藏所有内容区 day.style.display = "none"; week.style.display = "none"; month.style.display = "none"; // 根据选中的 value 显示对应元素 switch (value) { case "day": day.style.display = "block"; break; case "week": week.style.display = "block"; break; case "month": month.style.display = "block"; break; default: console.warn("Unknown filter value:", value); } }? 进阶建议：
- 使用 document.querySelectorAll(‘.content-box’) 统一管理内容块，避免硬编码；
- 添加 css 类（如 .hidden { display: none !important; }）替代内联样式，提升可维护性；
- 在 loadPost 中加入防错逻辑（如检查元素是否存在），增强鲁棒性。
最终完整可运行的初始化脚本如下：
document.addEventListener("DOMContentLoaded", () => { const day = document.getElementById("day"); const week = document.getElementById("week"); const month = document.getElementById("month"); const periodSelect = document.getElementById("filter"); function loadPost(value) { [day, week, month].forEach(el => el.style.display = "none"); if (value === "day") day.style.display = "block"; else if (value === "week") week.style.display = "block"; else if (value === "month") month.style.display = "block"; else console.warn("Invalid filter:", value); } // ✅ 正确绑定：传入回调函数，而非函数调用结果 periodSelect.addEventListener("change", () => loadPost(periodSelect.value)); // 初始化：默认显示第一个选项对应的内容（如 "day"） loadPost(periodSelect.value); });总结：事件监听失败往往不是语法错误，而是对「函数引用」与「函数调用」概念混淆所致。牢记 addEventListener(type, callback) 的第二个参数必须是可执行的函数对象——用 () => fn() 或 fn.bind(this) 是安全实践，而 fn() 是典型陷阱。