理解单选按钮的事件机制
许多开发者初次尝试监听单选按钮（radio button）的选中状态时，可能会直观地寻找一个类似于checked的特定事件。然而，javascript的dom事件模型中并没有为单选按钮提供这样一个专门的事件。当用户与单选按钮交互时，最相关的事件是input和change。
- change事件：当元素的值被用户改变，并且该改变被提交时触发。对于单选按钮，这意味着当用户选中一个新的单选按钮时，change事件会在当前焦点从元素移开或用户确认选择后触发。
- input事件：当<input>、<select>或<textarea>元素的值被修改时立即触发。对于单选按钮，input事件会在用户选中它时立即触发，通常与change事件的行为非常相似。
由于单选按钮的特性（同一name属性组中只能有一个被选中），当一个单选按钮被选中时，其checked属性会变为true，而同组中之前被选中的单选按钮的checked属性会变为false。因此，我们需要在input或change事件监听器中，检查事件目标元素的checked属性来判断其当前状态。
监听单选按钮选中状态的实现方法
以下介绍两种推荐的实现方法，它们都基于input事件，并能有效处理单选按钮的选中状态变化。
方法一：利用事件委托进行监听（推荐）
事件委托是一种高效的事件处理模式，特别适用于动态生成的元素或大量同类型元素。通过在它们的共同父元素（甚至document）上设置一个事件监听器，我们可以捕获从子元素冒泡上来的事件，然后根据事件的目标（event.target）来判断并处理特定的元素。
// 在文档根部或一个共同的父元素上设置事件监听
document.addEventListener('input', (event) => {
// 使用 event.target.closest() 查找最近的单选按钮父元素
// 这样可以确保即使点击的是单选按钮的标签，也能正确找到单选按钮本身
const radioElement = event.target.closest('[type="radio"]');
// 如果事件目标不是单选按钮，则不执行任何操作
if (!radioElement) {
return;
}
// 此时 radioElement 就是被点击的单选按钮
// 它的 checked 属性反映了其当前的选中状态
console.log(`单选按钮 ID: ${radioElement.id}, 选中状态: ${radioElement.checked}`);
// 根据选中状态执行特定逻辑
if (radioElement.checked) {
console.log(`ID 为 ${radioElement.id} 的单选按钮被选中。`);
// 可以在这里添加其他业务逻辑
}
});HTML 示例：
立即学习“Java免费学习笔记（深入）”；
<fieldset>
<legend>选择您的偏好</legend>
<label>
<input type="radio" name="radio-group-one" id="radio-1" value="optionA"> 选项 A
</label>
<label>
<input type="radio" name="radio-group-one" id="radio-2" value="optionB" checked> 选项 B
</label>
<label>
<input type="radio" name="radio-group-one" id="radio-3" value="optionC"> 选项 C
</label>
</fieldset>解析：
- event.target.closest('[type="radio"]')：这个方法会从event.target（实际触发事件的元素）开始，向上遍历其祖先元素，直到找到第一个匹配CSS选择器[type="radio"]的元素。这确保了即使用户点击了单选按钮旁边的<label>标签，也能正确识别到关联的<input type="radio">元素。
- radioElement.checked：这是JavaScript中用于获取或设置表单元素选中状态的布尔属性。当单选按钮被选中时，其值为true。
方法二：直接判断事件目标类型
如果不需要处理点击<label>标签的情况，或者你对事件目标有更直接的控制，可以使用Element.matches()方法来判断event.target是否为单选按钮。
document.addEventListener('input', (event) => {
// 使用 event.target.matches() 直接判断事件目标是否为单选按钮
if (!event.target.matches('[type="radio"]')) {
return; // 如果不是单选按钮，则不执行任何操作
}
// 此时 event.target 就是被点击的单选按钮
console.log(`单选按钮 ID: ${event.target.id}, 选中状态: ${event.target.checked}`);
// 根据选中状态执行特定逻辑
if (event.target.checked) {
console.log(`ID 为 ${event.target.id} 的单选按钮被选中。`);
// 可以在这里添加其他业务逻辑
}
});解析：
- event.target.matches('[type="radio"]')：这个方法检查event.target元素本身是否匹配给定的CSS选择器。如果匹配，则返回true。这种方法比closest更直接，但如果用户点击的是单选按钮旁边的标签而不是单选按钮本身（而该标签又没有for属性或嵌套了input），则可能无法触发。在现代HTML中，通常推荐将input嵌套在label中，或者使用label的for属性关联input的id，这样点击label也能触发input的事件。
注意事项与总结
- name属性的重要性：单选按钮的name属性是将其分组的关键。只有拥有相同name属性的单选按钮才能实现“互斥”选择。在监听事件时，通常会关注event.target的name属性，以区分不同的单选按钮组。
- input vs. change：对于单选按钮，input和change事件的行为非常相似，都会在用户改变选择后立即触发。在大多数情况下，使用input事件是安全的。
- checked属性：始终通过检查单选按钮元素的checked布尔属性来确定其当前的选中状态，而不是依赖某个不存在的checked事件。
- 事件委托的优势：对于包含大量表单元素或未来可能动态添加表单元素的页面，事件委托是更优的选择，因为它只需要一个事件监听器，可以减少内存消耗并简化代码管理。
通过理解JavaScript事件机制和单选按钮的特性，我们可以有效地监听并响应用户对单选按钮的交互，从而实现各种复杂的表单逻辑和用户体验。
