应使用change事件监听<input type="time">变化，因其在用户完成选择（点确定、失焦或回车）且值实际变更时触发，格式为"HH:MM"字符串；input事件不可靠，blur易误报，移动端需注意iOS兼容性问题。
HTML <input type="time"> 该用哪个事件监听变化
直接用 change 事件，不是 input，也不是 blur。因为 type="time" 在大多数浏览器中（Chrome、Edge、Safari）不会在用户拖动时间滚轮或点击增减按钮时持续触发 input；它只在值真正提交/确认后才算“改变”，change 正好匹配这个语义。
常见错误是套用文本框习惯写 oninput，结果发现点小时钟面板选时间没反应——那是因为用户还没“确认”选择，输入框内部仍处于编辑态，DOM 值未更新，input 事件不触发。
-
change：用户完成选择（点确定、失焦、回车），且值实际发生变化时触发 -
input：仅在部分浏览器（如 Chrome 某些版本）手动键盘输入时可能触发，不可靠 -
blur：失焦就触发，但值可能没变，容易误报
如何正确绑定并获取选中的时间值
绑定 change 后，直接读 event.target.value 即可，格式固定为 "HH:MM"（24 小时制，两位小时+两位分钟，无秒、无时区）。注意它返回的是字符串，不是 Date 对象。
示例：
立即学习“前端免费学习笔记（深入）”；
<input type="time" id="meeting-time">
<script>
document.getElementById('meeting-time').addEventListener('change', (e) => {
console.log(e.target.value); // 如 "14:30"
});
</script>
- 值为空时
e.target.value是空字符串""，不是null或undefined - 不要试图用
new Date(e.target.value)直接解析——缺少日期信息，会得到 Invalid Date - 若需转成时间戳，先拼一个基准日期（如
"1970-01-01T" + e.target.value），再用Date.parse()
移动端 Safari 和旧版 Android 的兼容性坑
iOS Safari 对 type="time" 的支持较弱：iOS 15.4 之前不触发 change 事件；即使新版，点击时间选择器后有时也不自动失焦，导致 change 延迟或不触发。
- 必须加
autocomplete="off"防止某些安卓浏览器自动填充干扰 - 可额外监听
blur作为兜底，但要配合防抖和值比对（避免重复处理） - 更稳妥的方案是降级为两个
<select>（时/分）或使用第三方库（如 flatpickr），但代价是失去原生体验和无障碍支持
为什么不能用 setInterval 轮询检测值变化
有人试过每 100ms 读一次 input.value，这不仅浪费 CPU，而且根本捕获不到中间状态——原生时间选择器在展开期间，DOM 值始终不变，直到用户确认。轮询既无效又违背事件驱动原则。
真正需要响应“正在编辑中”的场景极少；如果业务真有强需求（比如实时预览），应改用自定义控件，而非硬套原生 time 输入框。
原生 time 的设计哲学就是“确认即提交”，强行绕过这个约定，往往意味着你选错了控件类型。
