日历适合用事件委托是因为日期单元格动态生成，避免频繁绑定/解绑事件导致性能差和内存泄漏；只需在容器监听click，用closest('.date-cell')精准识别目标并读取data-date。
事件委托在日历组件中非常实用，尤其当日期单元格是动态生成（比如切换月份时重新渲染）时，不用每次重绑事件，只需在父容器上监听，再根据事件目标判断具体点击的是哪一天。
为什么日历适合用事件委托
日历的日期格子（<td> 或 <div class="date-cell">）通常由 JavaScript 动态生成，频繁添加/移除 DOM 节点。如果为每个日期单独绑定 click 事件，不仅性能差，还容易因节点销毁导致事件丢失或内存泄漏。事件委托把监听器挂到日历容器（如 <div id="calendar">），靠 event.target 精准识别被点击的日期元素。
绑定方式：监听容器 + 判断目标
核心是给日历外层容器绑定事件，并通过 class、data 属性或结构关系定位真实日期元素：
- 确保每个日期格子有可识别的标记，比如：
<div data-date="2024-05-15" class="date-cell">15</div> - 在容器上监听
click，检查event.target是否匹配日期元素（推荐用closest()向上找最近的匹配项，兼容代理子元素点击） - 提取日期信息，比如读取
dataset.date或从文本/类名中解析
代码示例（简洁可用）
假设日历结构如下：
立即学习“Java免费学习笔记（深入）”；
<div id="calendar">
<div class="week">
<div class="date-cell" data-date="2024-05-12">12</div>
<div class="date-cell" data-date="2024-05-13">13</div>
...
</div>
</div>
绑定委托事件：
document.getElementById('calendar').addEventListener('click', function(e) {
const cell = e.target.closest('.date-cell');
if (!cell) return;
const dateStr = cell.dataset.date;
if (!dateStr) return;
console.log('点击了日期：', dateStr); // 如 "2024-05-15"
// 这里可触发选中、跳转、弹窗等逻辑
});
注意事项和优化点
实际使用中要注意几个细节：
- 避免事件冒泡干扰：如果日期格子里还有按钮或图标，确保它们不会意外触发日历逻辑（可用
e.stopPropagation()在子元素内单独处理） - 禁用日期也要统一处理：给不可选日期加
disabled类，委托逻辑里先过滤掉cell.classList.contains('disabled') - 移动端需兼顾
touchstart或tap，但现代浏览器 click 在移动端也有 300ms 延迟优化，一般直接用 click 即可 - 如果日历支持键盘导航（如用方向键切换日期），事件委托不适用，需额外维护焦点状态和 keydown 监听
不复杂但容易忽略：关键不在“怎么绑”，而在于“怎么精准识别目标”——用 closest() 比反复判断 className 更健壮，也比只依赖 event.target 直接属性更容错。
