应监听 change 事件而非 click 以准确捕获单选按钮值变更,绑定到 name 相同的父容器并信任 e.target.checked,注意重置不触发 change 且需手动同步初始状态。

监听 change 事件而不是 click
单选按钮(<input type="radio">)切换时,真正反映“值已确定变更”的是 change 事件,不是 click。用 click 容易在用户反复点击同一选项时误触发,或在键盘操作(空格选中)下失效。
必须绑定到父容器或各个 input 上,且推荐委托给 name 相同的组的共同祖先(比如 <fieldset></fieldset> 或带 ID 的 <div>)。<p>示例:</p>
<pre class="brush:php;toolbar:false;"><div id="theme-group">
<input type="radio" name="theme" value="light" id="light"><label for="light">明亮</label>
<input type="radio" name="theme" value="dark" id="dark"><label for="dark">深色</label>
</div>
<script>
document.getElementById('theme-group').addEventListener('change', function(e) {
if (e.target.name === 'theme' && e.target.checked) {
handleThemeChange(e.target.value);
}
});
</script></pre>
<h3>确保只响应被选中的那个 <code>input
一个单选组里,change 事件会在任一选项被激活时触发,但旧选项的 checked 状态在新选项触发前已被设为 false —— 所以不能靠遍历所有 input[name="xxx"] 查 checked,而应直接信任 e.target.checked(它一定为 true)。
- 不要写
document.querySelectorAll('input[name="theme"]').forEach(...)再判断checked,效率低且逻辑冗余 - 不要依赖
e.target.value之外的字段(如id),除非你明确需要它;值本身已足够区分选项 - 如果用 jQuery,
$('input[name="theme"]').on('change', ...)也能工作,但原生更轻、无兼容负担
注意表单重置(reset)对事件的影响
当用户点击 <input type="reset"> 或调用 form.reset() 时,浏览器会恢复初始选中状态,但**不会触发任何 change 事件**。这意味着你的函数不会自动执行来同步 UI 或状态。
- 若需响应重置,必须手动监听
reset事件,并在其中主动读取当前选中项再调用处理函数 - 初始化时也建议显式调用一次处理函数(比如页面加载后),避免首屏状态与逻辑不一致
- 不要假设“页面加载完就一定有默认选中项”——若 HTML 中没写
checked,JS 读到的checked就是false,得兜底
React/Vue 等框架中别直接操作 DOM 事件
在 React 中,应使用受控组件:把 value 绑定到 state,用 onChange 处理器更新 state 并触发副作用;Vue 同理,用 v-model + @change 或计算属性监听。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
硬塞 addEventListener 到 ref 元素上,容易和框架的更新周期冲突(比如组件卸载后事件仍存在、重复绑定),而且绕过响应式系统会让状态不同步。
关键点:
- React:
<input type="radio" name="theme" value="light" onchange="{e"> setTheme(e.target.value)} /> - Vue:
<input type="radio" name="theme" value="light" v-model="theme">,然后 watchtheme - 不要在
useEffect里反复 add/remove 监听器,除非你精确控制依赖和清理
实际开发中最容易漏掉的是重置场景和初始状态同步,这两处一出问题,用户就会觉得“换主题没反应”或者“刷新后样式错乱”。










