radio的change事件需绑定到同name的所有元素上，不能委托父容器；change比click更符合语义，仅在选中项变化时触发；获取值应使用:checked伪类查询，而非event.target；框架中应使用v-model或受控组件而非手动监听。
radio单选框的change事件监听必须绑定到同name组的任意一个元素上
radio靠name属性组成逻辑单选组，浏览器只允许同一name下选中一个。但change事件不会冒泡到父容器，也不能用委托监听整个name组——你得手动绑定到某个具体<input type="radio">元素，或统一绑定到所有同name的元素上。
常见错误是只给第一个radio加监听，结果切换到其他选项时没反应；或者试图监听div容器，却收不到事件。
- 推荐做法：用
document.querySelectorAll('input[name="xxx"]')选中全部，再遍历.forEach(el => el.addEventListener('change', handler)) - 如果DOM动态生成，需在插入后立即绑定，不能依赖页面加载时的一次性绑定
- 注意：IE8及更早不支持
addEventListener，需用attachEvent回退（但现代项目通常不考虑）
change和click事件在radio上的行为差异
change只在用户真正“改变选择”时触发（比如从A切到B），而click只要点一下就触发——哪怕当前已选中该选项，也会再次触发。对radio来说，change更符合业务语义：你要的是“选中项变了”，不是“被点了”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 若用
click，重复点击已选中的radio会误触发逻辑（比如提交、计数） -
change在键盘操作（空格键切换）时也正常工作，click则不响应 - 移动端Safari对
change的支持稳定，无需额外hack
获取当前选中的radio值要读取checked状态，不能只信event.target
事件回调里的event.target确实是刚被点中的那个元素，但它只是“新目标”，不代表“当前有效选中项”——因为radio组里可能有多个checked属性残留（比如JS手动设了多个，或HTML里写死了多个checked）。真实业务中应以document.querySelector('input[name="xxx"]:checked')为准。
立即学习“前端免费学习笔记（深入）”；
const handler = (e) => {
const selected = document.querySelector('input[name="gender"]:checked');
if (selected) {
console.log(selected.value); // 安全读取
}
};
- 不要直接用
e.target.value，除非你100%确定HTML结构干净且无脚本干扰 - 如果
querySelector返回null，说明当前组没有选中项（合法状态，比如表单初始未选） - 用
:checked伪类比遍历所有radio再判断el.checked更简洁可靠
Vue/React等框架里别手动addEventListener
在框架上下文中，直接操作DOM绑定change事件容易和响应式系统冲突。例如Vue中应使用v-model绑定一个字符串变量，React中用value + onChange受控组件模式。
- Vue：
<input type="radio" v-model="picked" value="a" name="opt">，picked自动同步 - React：
value属性必须与state一致，否则变成非受控；onChange里用setState({ picked: e.target.value }) - 强行在框架里混用
addEventListener可能导致视图与状态不同步，尤其在重渲染后事件绑定丢失
click当change用——这两个点一旦出问题，调试时往往卡很久。 
