最可靠的是 change 事件，它在用户确认选择后触发，兼容 IE10+；应使用 e.target.value 获取标准 YYYY-MM-DD 字符串，避免 valueAsDate 等不可靠方式。
用 change 事件监听
浏览器对 input 类型为 date 的元素不触发 input 事件（哪怕用户手动输入或粘贴），所以别指望靠它实时捕获。真正稳定可用的是 change 事件——它在用户确认选择（点“确定”、失焦、或回车）后触发，语义准确，兼容性好（IE10+ 都支持）。
常见错误是绑了 input 事件却收不到回调，尤其在移动端日期选择器关闭后毫无反应，本质就是误判了事件时机。
- 只对
绑定change，不要混用input或blur - 确保 DOM 加载完成后再绑定，否则可能找不到元素：
document.addEventListener('DOMContentLoaded', ...) - 如果需要“选中即提交”，
change已足够；若真要毫秒级响应（比如联动禁用其他字段），得靠额外逻辑模拟，但通常没必要
change 事件里怎么安全读取日期值？
event.target.value 是唯一推荐方式，返回标准 YYYY-MM-DD 字符串（如 "2024-05-20"）。不要用 dataset、getAttribute 或尝试解析 valueAsDate——后者在某些旧版 Safari 中有 bug，且返回 Date 对象反而容易出时区问题。
示例代码：
const dateInput = document.querySelector('input[type="date"]');
dateInput.addEventListener('change', (e) => {
const dateString = e.target.value; // ✅ 安全、稳定、格式统一
if (!dateString) return; // 用户清空了输入框
console.log('选中的日期：', dateString);
});
- 值为空字符串
""表示用户未选择或已清空，不是null或undefined - 不要依赖
e.target.valueAsNumber，它对日期无效（始终为NaN） - 如果后续要转成
Date对象，用new Date(dateString)即可，无需额外处理时区
为什么 blur 不适合做主监听手段？
blur 确实会在日期选择器关闭后触发，但它和值是否改变无关：用户点开又取消、或者焦点移到别处但没改值，blur 都会执行。这就导致逻辑误判——比如你写了“值变就发请求”，结果用户只是点了一下又关掉，请求却发了两次。
-
blur可作为补充（比如校验必填），但不能替代change判断值变更 - 移动端上，部分 Android 浏览器在日期选择器关闭后不会立即触发
blur，存在延迟或丢失风险 - 如果同时监听
change和blur，注意避免重复执行相同逻辑
表单自动提交时，change 还管用吗？
管用，但要注意触发顺序。如果用户通过回车或点击“确定”关闭日期选择器，change 会先于 submit 触发；但如果用户直接点表单的提交按钮，而日期输入框没失焦，change 可能还没触发——这时表单提交携带的仍是旧值。
- 保险做法：在
submit事件处理器里，主动读一次input.value，不依赖之前change的缓存 - 不要在
change里修改表单状态（比如设disabled）后，又期望submit能拿到最新值——DOM 更新是同步的，没问题；但异步操作（如fetch后再设状态）可能来不及 - 如果业务强依赖“选完立刻提交”，建议在
change回调里调用form.submit()，而不是等用户点按钮
日期输入框的事件机制比看起来更“克制”——它不鼓励过度响应，而是把确认权交给用户。别试图绕过这个设计去监听“每一次按键”，那只会增加兼容性负担和逻辑漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
