change事件只能监听到单选按钮组中真正切换选项的操作，需为每个radio单独绑定或用事件委托监听父容器并校验target.checked为true。
change事件监听不到单选按钮点击？
默认给 <input type="radio"> 单独绑定 change 事件是可行的，但对整个“组”（即 name 相同的一组）监听时，容易误以为要绑在父容器上——其实不行。浏览器只在用户真正切换到**另一个选项**时才触发 change，且仅触发被选中的那个元素的事件。如果用户点的是当前已选中的项，change 根本不触发。
常见错误现象：console.log 没输出、状态没更新、表单提交时取不到值。
- 必须为每个
<input type="radio">单独添加事件监听器（或用事件委托） - 不能只监听父
<div> 或 <code><form></form>——它们本身不发change事件 -
click事件可以捕获所有点击，但语义不如change准确（比如通过键盘空格切换也会触发change，但不会重复触发click）
用事件委托监听整组单选按钮
比起逐个绑定，更推荐用事件委托：监听父容器，判断 event.target 是否为 radio 且 name 匹配。这样动态增删选项也不用重新绑定。
注意：必须用 change，不是 click；且要检查 target.checked === true，因为冒泡时可能抓到未选中的兄弟节点（虽然概率低，但严谨起见）。
document.querySelector('#my-radio-group').addEventListener('change', function (e) {
if (e.target.type === 'radio' && e.target.name === 'gender' && e.target.checked) {
console.log('选中值：', e.target.value);
}
});
Vue/React 中怎么处理？别手动绑事件
在框架里硬写 addEventListener 是反模式。应交由响应式系统管理：
- Vue：用
v-model绑定一个字符串变量，值自动同步为当前选中项的value - React：用
useState存储选中值，每个<input>的onChange回调设为setValue(e.target.value) - 两者都要求同一组 radio 的
name属性一致，否则无法互斥
若强行在 Vue 的 mounted 里手动加 change 监听，会绕过响应式追踪，导致视图不更新。
兼容性与移动端注意事项
change 事件在所有现代浏览器和 iOS/Android WebView 中都支持，但有两点容易被忽略：
- Android Chrome 早期版本（≤70）中，快速连续点击同一 radio 可能漏触发
change—— 实际极少发生，但若业务强依赖，可加click作为兜底（需防重复） - iOS Safari 对 label 点击触发 radio 切换的支持很稳定，但若 label 里嵌了
div或用了pointer-events: none，可能使点击失效 - 不要用
input[type=radio]:checked + label这类 CSS 选择器做状态判断逻辑——它只是渲染层，和事件无关
最稳的做法：始终以 change 为准，确保每个 radio 都有 name 和 value，且初始有一个 checked（或 JS 主动设置），避免出现“无选中态”的边界问题。
