实时获取表单输入变量需监听对应事件：文本类用input事件，checkbox/radio用change事件，contenteditable元素用innerText/textContent；注意防抖、事件委托及初始值读取。
表单输入变量的实时获取，核心是监听用户输入事件，并在事件触发时读取当前值。不需要等表单提交，也不依赖定时轮询，关键是选对事件、及时取值、注意输入类型差异。
用 input 事件监听文本类输入
对于 <input type="text">、<textarea>、<input type="search"> 等，推荐使用 input 事件。它在每次输入内容变化（包括粘贴、删除、键盘输入）后立即触发，响应及时且兼容性好（IE9+）。
- 直接绑定：给元素添加
addEventListener('input', handler) - 在 handler 中用
event.target.value获取最新值 - 避免用
change事件——它只在失焦后触发，不满足“实时”要求
处理 checkbox 和 radio 的实时取值
这类控件没有文本输入，但状态变化也需要实时响应。它们的值不是靠 value 属性直接反映，而是靠 checked 属性判断是否被选中。
- 监听
change事件更合适（input在部分浏览器中对 checkbox 支持不稳定） - 获取值示例：
checkbox.checked ? 'on' : 'off'或直接用布尔值 - 一组 radio 可统一监听父容器，通过
event.target.value拿到当前选中的值
注意 contenteditable 元素和富文本编辑器
如果输入区域是 contenteditable="true" 的 div 或其他非表单元素，不能用 value 属性。需改用 innerText 或 textContent（后者保留换行和空格）获取内容。
立即学习“Java免费学习笔记（深入）”；
- 同样监听
input事件（现代浏览器支持） - 若需兼容旧版 IE，可补充监听
keyup、paste等事件 - 注意 HTML 标签可能混入，必要时做简单清理（如用
textContent避免 XSS 风险）
避免常见坑：防抖、重复绑定与初始值
高频触发的 input 事件容易造成性能压力，尤其配合搜索建议或校验逻辑时。
- 简单场景可直接处理；复杂逻辑建议加防抖（例如延迟 300ms 再执行）
- 动态创建的表单元素，要确保事件绑定在元素存在之后，或用事件委托方式绑定到父级
- 页面加载后，别忘了手动读一次初始值（比如预填充的 input），否则可能漏掉默认状态
