事件委托在日历组件中通过父容器监听click并用target.closest识别日期单元格实现高效交互，需确保容器稳定不重建、用data属性标记日期，并过滤禁用状态。
事件委托在日历（Calendar）组件中非常实用，尤其当日期单元格是动态渲染（如每月切换、年份跳转）时，无需为每个 <td> 或 <div class="date-cell"> 单独绑定事件，只需在父容器（如日历表格或容器 div）上监听一次 click，再通过事件对象的 target 判断是否点击了有效日期单元格即可。
确保日历容器有明确且稳定的事件捕获点
给外层日历容器（比如一个 <div id="calendar"> 或 <table class="calendar-table">）设置唯一标识，并确保它不随日期切换被整体销毁重建——否则委托会失效。推荐用 class 或 data 属性标记日期单元格，例如：
<td class="calendar-date" data-date="2024-05-15">15</td>- 或
<div class="date-cell" data-year="2024" data-month="4" data-day="15">15</div>（注意：month 从 0 开始）
在父容器上绑定一次事件委托
使用 addEventListener 在日历容器上监听 click，并在回调中判断点击目标是否匹配日期单元格：
const calendarEl = document.getElementById('calendar');
calendarEl.addEventListener('click', function (e) {
const cell = e.target.closest('.calendar-date, .date-cell');
if (!cell) return;
const dateStr = cell.dataset.date ||
`${cell.dataset.year}-${String(+cell.dataset.month + 1).padStart(2, '0')}-${String(cell.dataset.day).padStart(2, '0')}`;
// ✅ 此时 dateStr 就是选中的日期（如 "2024-05-15"）
console.log('选中日期：', dateStr);
// 可触发 onSelect(date)、高亮、关闭弹窗等逻辑
});
处理禁用/不可选日期的兼容性
若某些日期单元格被设为禁用（如 class="calendar-date disabled"），应在委托逻辑中主动过滤：
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 检查
cell.classList.contains('disabled')，跳过处理 - 也可统一用
data-enabled="false"属性，更语义化 - 避免用户误点后触发无效行为（如提交空日期、报错）
注意动态重绘后的 DOM 一致性
每次切换月份时，应只替换日历主体内容（<tbody> 或日期区域 div），保留最外层容器不变。如果整个 #calendar 被 innerHTML 重写，事件监听器不会自动迁移——必须确保容器复用，或在重绘后重新绑定（不推荐）。
不复杂但容易忽略
