非嵌套元素的Event Delegation：Bootstrap单选按钮组事件委托实现疑问

针对你遇到的label与input非嵌套的情况，有两种可靠的事件委托写法，推荐优先用基于for属性关联的方法，不依赖DOM结构顺序，更健壮：

方法一：利用label的for属性匹配对应input #

因为Bootstrap的这种单选按钮组里，每个label的for属性值和对应input的id是一一对应的，所以可以通过这个关联关系找到目标input：

// 给父容器.btn-group绑定事件委托
document.querySelector('.btn-group').addEventListener('click', function(e) {
  let targetRadio;
  const target = e.target;

  // 点击的是label按钮
  if (target.classList.contains('btn')) {
    const radioId = target.getAttribute('for');
    targetRadio = document.getElementById(radioId);
  } 
  // 直接点击到了input（虽然Bootstrap默认隐藏，但也可能触发）
  else if (target.classList.contains('btn-check')) {
    targetRadio = target;
  }

  // 拿到目标单选框后执行业务逻辑
  if (targetRadio) {
    console.log('当前选中的单选框ID:', targetRadio.id);
    // 这里可以写你的处理逻辑，比如获取值、更新状态等
  }
});

方法二：依赖DOM结构的同级元素查找（不推荐，易受结构变动影响） #

如果你的DOM结构固定是input紧跟label的顺序，也可以通过同级元素查找，但如果后续结构调整（比如把label放前面）就会失效：

document.querySelector('.btn-group').addEventListener('click', function(e) {
  let targetRadio;
  const target = e.target;

  if (target.classList.contains('btn')) {
    // 取label的前一个同级元素（即对应的input）
    targetRadio = target.previousElementSibling;
    // 额外校验确保拿到的是目标单选框
    if (!targetRadio || !targetRadio.classList.contains('btn-check')) {
      targetRadio = null;
    }
  } else if (target.classList.contains('btn-check')) {
    targetRadio = target;
  }

  if (targetRadio) {
    console.log('当前选中的单选框ID:', targetRadio.id);
  }
});

为什么之前的event.target.closest('.btn-check')无效？ #

closest()方法只会在当前元素的自身及父元素链中查找匹配的元素，而你的label和input是同级关系，并非嵌套，所以label的父元素链里没有对应的input，自然找不到。

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