change事件更适合取最终值，因其仅在用户确认选择后触发一次且值可靠；input事件则在拖拽过程中高频触发，可能获取中间态不稳定值。
HTML <input type="color"> 的 change 事件监听方式
直接给 <input type="color"> 绑定 change 事件就能拿到选中的颜色值，不需要额外 polyfill 或库。它的值始终是 7 位小写十六进制格式（如 "#ff0000"），且浏览器原生支持度良好（Chrome 21+、Firefox 27+、Edge 12+、Safari 12.1+）。
常见错误是误用 input 事件——它会在拖拽过程中高频触发，而 change 只在用户确认选择（松开鼠标/离开控件）后触发一次，更符合“选完取值”的预期。
为什么 change 比 input 更适合取最终值
change 事件语义上代表“值已提交”，对 color 输入框来说，就是用户完成了一次完整的选择操作；input 则反映的是实时变化，包括滑块拖动、色盘点击过程中的中间态，可能拿到不稳定的值（比如 Safari 在拖拽时会反复触发，但值未必是最终确定的）。
-
change：只在用户停止交互后触发一次，值可靠 -
input：每像素移动都可能触发，性能开销大，且值未最终确认 - 移动端（iOS Safari）对
change支持稳定，无需降级处理
监听代码示例与关键细节
最简可行写法：
立即学习“前端免费学习笔记（深入）”；
<input type="color" id="picker">
<script>
const picker = document.getElementById('picker');
picker.addEventListener('change', () => {
console.log(picker.value); // 如：#3a86ff
});
</script>
注意以下几点：
- 必须等 DOM 加载完成后再获取元素，否则
getElementById返回null -
value始终是字符串，长度固定为 7，首字符一定是#，无需正则校验 - 初始值默认为
#000000，若需自定义默认色，显式设置value属性即可：<input type="color" value="#ff6b6b"> - 不支持通过 JS 设置透明度（alpha），
rgba()或hsla()会被自动转成不带 alpha 的 hex
兼容性与 fallback 注意事项
IE 完全不支持 type="color"，会退化为普通文本框。如果项目仍需兼容 IE，不能只靠 CSS 隐藏/显示 fallback 元素——因为 IE 下 input 元素的 type 属性无法被 JS 动态识别为 "color"（返回 "text"），需用特性检测：
const input = document.createElement('input');
input.type = 'color';
const supportsColor = input.type === 'color';
若不支持，应提供替代方案（如第三方色盘库或 <input type="text"> + 正则校验），而不是静默失败。
真正容易被忽略的是：部分安卓 WebView（尤其旧版）虽渲染出颜色控件，但 change 事件可能不触发，建议加一层防错——比如同时监听 blur，并在失去焦点时检查 value 是否变化。
