理解单选按钮的事件机制
在javascript中，对于html的 元素，并没有一个名为 checked 的专属事件会在其选中状态发生变化时直接触发。开发者尝试使用 document.getelementbyid("radio1").addeventlistener('checked', ...) 这样的方式是无效的，因为 checked 并非一个标准的dom事件。
要正确监听单选按钮的选中状态，我们需要依赖更通用的事件，例如 input 或 change 事件。当用户与单选按钮进行交互（点击或通过键盘操作）导致其选中状态改变时，这些事件会被触发。随后，我们可以在事件处理函数中检查目标单选按钮的 checked 属性来确定其当前状态。
利用事件委托高效监听
在处理一组相关的表单元素（如单选按钮组）时，为每个元素单独添加事件监听器可能会导致性能问题，尤其是在元素数量较多或动态生成时。事件委托（Event Delegation）是一种更高效的模式，它通过将事件监听器添加到它们的共同父元素上，然后利用事件冒泡机制来捕获和处理子元素的事件。
以下是两种基于事件委托的实现方式：
方法一：使用 closest() 筛选目标元素
这种方法将事件监听器附加到文档（或一个更具体的父容器）上，然后使用 Event.target.closest() 方法来确定触发事件的元素是否是目标单选按钮。closest() 方法会从当前元素开始，向上遍历DOM树，直到找到与给定CSS选择器匹配的最近祖先元素。
立即学习“Java免费学习笔记（深入）”；
// HTML 结构示例
/*
*/
// 在文档级别添加 input 事件监听器
document.addEventListener('input', (evt) => {
// 使用 closest() 查找最近的 type="radio" 祖先元素
const elRadio = evt.target.closest('[type="radio"]');
// 如果事件不是由单选按钮触发，则直接返回
if (!elRadio) {
return;
}
// 打印选中单选按钮的ID及其选中状态
console.log(`${elRadio.id} ${elRadio.checked}`);
});代码解析：
- document.addEventListener('input', ...)：将 input 事件监听器附加到 document 对象，这意味着任何在文档中发生的 input 事件都会被捕获。
- evt.target.closest('[type="radio"]')：evt.target 是实际触发事件的元素。closest('[type="radio"]') 会检查 evt.target 自身及其所有祖先元素，看是否有 type="radio" 的元素。如果 evt.target 本身就是单选按钮，它会返回自身。
- if (!elRadio) return;：这是一个重要的检查，确保只有当事件是由一个单选按钮触发时，后续逻辑才会被执行。
- console.log(${elRadio.id} ${elRadio.checked});：输出当前被操作的单选按钮的ID以及其当前的 checked 状态（true 或 false）。
方法二：使用 matches() 精准匹配目标元素
Element.matches() 方法提供了一种更直接的方式来检查一个元素是否与给定的CSS选择器匹配。当事件目标就是我们想要监听的元素时，这种方法非常简洁。
// HTML 结构示例同上
// 在文档级别添加 input 事件监听器
document.addEventListener('input', (evt) => {
// 使用 matches() 检查事件目标是否直接是 type="radio" 元素
if (!evt.target.matches('[type="radio"]')) {
return; // 如果不是单选按钮，则直接返回
}
// 打印选中单选按钮的ID及其选中状态
console.log(`${evt.target.id} ${evt.target.checked}`);
});代码解析：
- evt.target.matches('[type="radio"]')：直接检查 evt.target 元素是否符合 [type="radio"] 这个CSS选择器。
- 这种方法适用于 evt.target 本身就是单选按钮的情况。如果单选按钮内部有其他可点击的子元素（虽然单选按钮通常不会有），并且点击了这些子元素，closest() 会更鲁棒。但对于标准的单选按钮，matches() 同样有效且简洁。
重要注意事项
-
input 与 change 事件的选择：
- 对于单选按钮，input 和 change 事件在行为上通常非常相似，都会在用户交互导致选中状态改变时触发。
- change 事件通常用于表单元素的值发生“提交”或“最终”改变时，而 input 事件则在元素值发生任何改变时立即触发（例如，文本输入框中每输入一个字符）。对于单选按钮，这种区别不明显。
- 在大多数情况下，使用 input 或 change 都可以达到目的。选择哪个取决于个人偏好或项目约定。
-
name 属性的重要性：
- 单选按钮的 name 属性是其分组的关键。只有 name 属性相同的单选按钮才能实现“互斥选择”的效果（即选中其中一个会自动取消同组中其他按钮的选中状态）。
- 在监听事件时，虽然我们直接检查 evt.target.checked，但 name 属性的正确设置是确保单选按钮功能逻辑正确的前提。
-
始终检查 checked 属性：
- 无论使用哪种事件（input 或 change）和哪种目标筛选方法（closest() 或 matches()），核心都是在事件处理函数内部检查目标单选按钮的 checked 属性。这个布尔值（true 或 false）直接反映了单选按钮当前的选中状态。
总结
尽管JavaScript没有为单选按钮提供一个专门的 checked 事件，但通过利用标准的 input 或 change 事件结合事件委托机制，我们可以高效且准确地监听其选中状态的变化。无论是使用 closest() 还是 matches() 方法来筛选事件目标，关键在于在事件处理函数中检查元素的 checked 属性，从而实现对单选按钮选中状态的动态响应。这种方法不仅性能优越，而且代码结构清晰，易于维护。
