应监听 input 事件实现实时背景色预览，因其在颜色值变化的每一刻（如拖动色盘、输入 hex）都触发，而 change 事件滞后；通过 colorinput.value 获取 7 位小写 hex 值并赋给 preview.style.backgroundcolor 即可。
当用户在 HTML 的 <input type="color"> 选择器中更改颜色时，可以通过监听 input 事件实现实时背景色预览，无需等待失去焦点（change 事件太滞后）。
监听 input 事件获取实时颜色值
input 事件在颜色值变化的每一刻都会触发（比如拖动色盘、手动输入 HEX 值），比 change 更灵敏。注意：不要用 keyup 或 click，它们不适用。
- 获取元素：
const colorInput = document.querySelector('input[type="color"]'); - 绑定事件：
colorInput.addEventListener('input', handleColorChange); - 在回调中读取
colorInput.value（始终是 7 位小写 HEX 字符串，如"#ff5733"）
将颜色应用到目标元素背景
拿到颜色值后，直接赋给目标元素的 style.backgroundColor 即可。推荐作用于一个预览区域（如 <div id="preview">），避免影响表单本身。
<ul>
<li>确保目标元素存在且可样式化：<code>const preview = document.getElementById('preview');
preview.style.backgroundColor = colorInput.value;
preview.textContent = colorInput.value;
兼容性与边界处理建议
现代浏览器均支持 input[type="color"] 和 input 事件，但需注意：
- 初始值默认为
"#000000"，页面加载后可主动触发一次预览：handleColorChange(); - 移动端 Safari 对
input事件支持良好，无需降级；若需支持极老环境，可 fallback 到change+ 按钮手动触发 - 避免重复绑定：使用函数名而非匿名函数，便于后续
removeEventListener（如需）
不复杂但容易忽略：用 input 而不是 change，是实现真正“实时”的关键。
