本文详解 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() 是典型陷阱。
