理解单选按钮的事件机制
在javascript中，htmlinputelement类型的单选按钮（type="radio"）并没有一个名为'checked'的特定事件来直接响应其选中状态的变化。当用户与单选按钮交互时，浏览器会触发更通用的表单元素事件，例如input或change。因此，我们需要利用这些通用事件，并通过检查目标元素的checked属性来判断其当前的选中状态。
基础事件监听与状态判断
虽然不推荐为每个单选按钮单独添加事件监听器，但理解其基本原理是重要的。当用户点击一个单选按钮时，input事件会被触发。我们可以在事件处理函数中访问目标元素的checked属性来获取其布尔型选中状态。
<input type="radio" name="radio-group-one" id="radio-1"> <input type="radio" name="radio-group-one" id="radio-2" checked> <input type="radio" name="radio-group-one" id="radio-3">
document.getElementById("radio-1").addEventListener('input', (event) => {
// 当radio-1被点击时，此事件会触发
console.log(`Radio 1 checked state: ${event.target.checked}`);
if (event.target.checked) {
console.log("Radio 1 is now checked.");
}
});
document.getElementById("radio-2").addEventListener('input', (event) => {
console.log(`Radio 2 checked state: ${event.target.checked}`);
if (event.target.checked) {
console.log("Radio 2 is now checked.");
}
});
// 为radio-3添加类似监听器...在上述示例中，当用户点击radio-1时，event.target.checked将变为true。如果用户点击了radio-2，那么radio-1的checked属性会自动变为false，但radio-1上并不会再次触发事件（因为用户没有直接与它交互）。这正是事件委托的优势所在。
优化实践：事件委托
为每个单选按钮单独添加事件监听器会导致代码冗余且效率低下，尤其是在表单中包含大量单选按钮时。更推荐的做法是使用事件委托，将监听器添加到它们的共同父元素上。当事件从子元素冒泡到父元素时，我们可以在父元素的监听器中判断事件的来源是否是单选按钮，并进一步处理。
方法一：使用Event.target.closest()
closest()方法会遍历元素及其祖先元素，直到找到与指定选择器匹配的第一个元素。这对于判断事件是否来源于某个特定类型的元素非常有用。
立即学习“Java免费学习笔记（深入）”；
<div id="radioContainer">
<input type="radio" name="radio-group-one" id="radio-1">
<input type="radio" name="radio-group-one" id="radio-2" checked>
<input type="radio" name="radio-group-one" id="radio-3">
</div>document.getElementById("radioContainer").addEventListener('input', (evt) => {
// 查找事件目标元素自身或其最近的祖先中，类型为"radio"的input元素
const elRadio = evt.target.closest(`[type="radio"]`);
// 如果事件不是由单选按钮触发的，则不做任何处理
if (!elRadio) return;
// 如果是单选按钮，打印其ID和选中状态
console.log(`${elRadio.id} 选中状态: ${elRadio.checked}`);
if (elRadio.checked) {
console.log(`单选按钮 ${elRadio.id} 被选中了。`);
// 在这里执行当该单选按钮被选中时需要执行的逻辑
} else {
// 注意：对于radio按钮，当一个被选中时，同组的其他按钮会自动变为未选中，但它们不会触发事件。
// 这个else分支通常不会在radio按钮的input事件中被触发，因为input事件只在用户直接交互的按钮上触发，
// 且此时该按钮总是被选中的。
}
});方法二：使用Element.matches()
matches()方法检查元素是否与指定的CSS选择器匹配。这对于直接判断事件目标是否为我们关心的元素类型非常方便。
<div id="radioContainer">
<input type="radio" name="radio-group-one" id="radio-1">
<input type="radio" name="radio-group-one" id="radio-2" checked>
<input type="radio" name="radio-group-one" id="radio-3">
</div>document.getElementById("radioContainer").addEventListener('input', (evt) => {
// 检查事件目标元素是否是一个类型为"radio"的input元素
if (!evt.target.matches(`[type="radio"]`)) return; // 如果不是，则不做任何处理
// 如果是单选按钮，打印其ID和选中状态
console.log(`${evt.target.id} 选中状态: ${evt.target.checked}`);
if (evt.target.checked) {
console.log(`单选按钮 ${evt.target.id} 被选中了。`);
// 执行当该单选按钮被选中时需要执行的逻辑
}
});这两种事件委托的方法都非常有效。closest()更适用于当事件可能发生在单选按钮的子元素（如果有）上，但我们仍想定位到单选按钮本身的情况。而matches()则直接判断事件目标是否就是单选按钮。对于简单的单选按钮，两者效果类似。
获取选中状态：checked属性
无论采用哪种事件监听方式，核心都是通过访问单选按钮元素的checked属性来获取其当前的选中状态。element.checked会返回一个布尔值：true表示该单选按钮当前被选中，false表示未选中。
注意事项
- name属性的重要性：单选按钮必须拥有相同的name属性值才能形成一个组。在同一个组中，一次只能有一个单选按钮被选中。当一个单选按钮被选中时，同组的其他按钮会自动变为未选中状态。
-
input与change事件：
- input事件在元素的值或选中状态发生变化时立即触发。对于单选按钮，它在用户点击并改变选中状态时触发。
- change事件通常在元素的值发生实际改变并失去焦点时触发。对于单选按钮，它在选中状态改变时触发，行为与input事件对于单选按钮而言通常一致。在大多数场景下，使用input或change都可以达到监听单选按钮选中状态的目的。本文示例统一使用input事件。
- 事件委托的监听器位置：为了实现事件委托，事件监听器必须添加到单选按钮组的共同父元素上，而不是单个单选按钮上。
- checked属性的即时性：当input事件触发时，event.target.checked属性已经反映了最新的选中状态。
总结
尽管JavaScript没有为单选按钮提供一个专门的'checked'事件，我们仍然可以通过监听input或change等通用事件，并结合事件委托机制来高效、优雅地处理单选按钮的选中状态变化。通过在事件处理函数中检查event.target.checked属性，可以准确判断当前被交互的单选按钮是否处于选中状态，并在此基础上执行相应的业务逻辑。这种方法不仅代码简洁，而且具有良好的性能和可维护性。
