change事件无法实时更新，仅在用户确认选择后触发；input事件才能实现拖拽色盘等操作的实时预览，且需配合change用于最终保存与校验。
不能只靠 change 事件实现“实时”修改——它只在用户确认选择后触发一次，拖动色盘过程完全无响应。真要实时预览，必须用 input 事件；change 只适合最终保存或校验。
为什么 change 事件做不到实时更新
change 在颜色选择器里只在两种情况下触发：用户点击“确定”按钮，或输入框失去焦点（比如点到别处）。而用户拖拽色环、滑动亮度条、在色盘上移动取色点时，change 完全不触发。这时候 UI 停滞，用户会以为功能卡了。
- 你监听
change并改document.documentElement.style.setProperty('--primary-color', e.target.value)→ 拖着滑块不动，页面颜色一动不动 - 用户选错色后点“取消”，
change根本不触发，但输入框 value 已被浏览器悄悄重置为上次有效值，你状态没同步，实际和 UI 不一致 - 移动端（尤其 iOS）没有“确定/取消”按钮，
change触发时机更不可控，基本不可依赖
input 事件才是实时预览的正确选择
input 在每次颜色值变化时立刻触发：拖滑块、点色盘、手动编辑 hex 值（如果允许）都会执行。它是唯一能捕捉中间状态的事件。
- 必须用
input，不是click或focus—— 后两者无法感知颜色变化本身 - 初始 value 必须是合法 7 位小写 hex（如
#3b82f6），否则浏览器静默 fallback 到#000000，input事件照常触发，但值是错的 - 绑定后立即读
colorInput.value可获取当前值，无需等事件 —— 初始化 CSS 变量时就该这么做
示例：
立即学习“前端免费学习笔记（深入）”；
const picker = document.getElementById('primary-picker');
picker.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-color', picker.value);
});
要不要同时监听 input 和 change
要，但分工明确：
-
input：驱动 UI 实时预览、同步 canvas / SVG / 预览区背景色 -
change：提交表单、存入 localStorage、触发 API 请求、做 hex 格式校验（比如拒绝#ff6b35cc这种带 alpha 的非法值） - 不要在
input里做耗时操作（如发请求），避免卡顿；change才是“最终决策点”
常见翻车点：只绑 input 却没处理“用户反悔点取消”的情况 —— 此时输入框 value 是旧值，但你的状态可能已更新，得靠 change 触发前再比对一次。
兼容性与降级必须手动处理
input[type="color"] 在旧版 Safari、IE、部分安卓 WebView 里直接降级为文本框，且不触发 input 事件（只触发 change）。不能假设它一定存在。
- 检测支持性：用
document.createElement('input').type === 'color'，不支持时换 text 输入 + 正则校验 - value 始终是字符串，哪怕空值也返回
"#000000"，不是null或undefined - 服务端返回的缩写 hex（如
#abc）必须补全成#aabbcc再赋给 value，否则浏览器丢弃
最易被忽略的是：CSS 变量名含连字符（如 --bg-secondary），传给 setProperty 时必须原样传，不能转驼峰，否则无效。
