HTML单选框unchecked事件：onclick与onchange的差异及触发问题

1. 这是正确行为吗？ #

是的，这是符合HTML规范的标准行为。对于同name的单选框组，切换选项时，只有被新选中的单选框会触发onchange事件，之前被取消选中的单选框不会触发该事件，Edge、Chrome等现代浏览器都遵循这一规范。

2. 如何实现触发两次事件的预期效果？ #

可以通过以下几种方式实现：

方法1：基于点击事件追踪状态变化 #

通过记录上一次选中的单选框值，在点击事件中对比当前选中状态，分别触发取消选中和选中的逻辑：

<label><input type="radio" name="test" value="sel1"> radio 1</label>
<label><input type="radio" name="test" value="sel2"> radio 2</label>

// 初始化记录上一次选中的项
let lastSelected = document.querySelector('input[name="test"]:checked')?.value;

function handleRadioAction() {
  const currentSelected = document.querySelector('input[name="test"]:checked')?.value;
  
  // 触发取消选中项的逻辑
  if (lastSelected && lastSelected !== currentSelected) {
    const deselectedRadio = document.querySelector(`input[name="test"][value="${lastSelected}"]`);
    console.log(deselectedRadio.value, deselectedRadio.checked);
  }
  
  // 触发选中项的逻辑
  if (currentSelected) {
    const selectedRadio = document.querySelector(`input[name="test"][value="${currentSelected}"]`);
    console.log(selectedRadio.value, selectedRadio.checked);
  }
  
  // 更新记录的选中项
  lastSelected = currentSelected;
}

// 给所有单选框绑定点击事件
document.querySelectorAll('input[name="test"]').forEach(radio => {
  radio.addEventListener('click', handleRadioAction);
});

方法2：使用MutationObserver监听属性变化 #

通过监听单选框的checked属性变化，无论选中还是取消都会触发回调：

const radios = document.querySelectorAll('input[name="test"]');
radios.forEach(radio => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 只关注checked属性的变化
      if (mutation.attributeName === 'checked') {
        console.log(radio.value, radio.checked);
      }
    });
  });
  // 监听单选框的属性变化
  observer.observe(radio, { attributes: true });
});

3. onclick与onchange的差异 #

• 触发时机不同：
  • onclick：只要触发了单选框的点击交互（包括点击label触发的单选框点击）就会执行，即使点击的是已经选中的单选框，也会触发。
  • onchange：仅当单选框的选中状态发生改变时才会执行。比如点击已选中的单选框不会触发；切换到新选项时，只有新选中的单选框会触发。
• 触发逻辑不同：
  • onclick基于交互动作（点击/回车触发的点击），不关心状态是否变化。
  • onchange基于元素状态（checked属性）的改变，只有状态变更时才触发。
• 适用场景不同：
  • 若需要捕捉所有与单选框的点击交互，用onclick。
  • 若仅关心单选框的选中状态变化，用onchange，避免不必要的触发。

内容的提问来源于stack exchange，提问作者Perry