如何为单选按钮的change事件实现事件委托？

直接在父元素上监听change事件即可实现委托，因为change事件支持事件冒泡。具体实现如下：

HTML 结构 #

<div id="radioContainer">
  <span>
    <input
      type="radio"
      id="all0"
      name="difficulty-ask"
      class="difficultyaskclass"
      value="all"
      checked="checked"
    />
    <label for="all0">All</label>
    <input
      type="radio"
      id="2easy1"
      name="difficulty-ask"
      class="difficultyaskclass"
      value="easy"
    />
    <label for="2easy1">Easy</label>
    <input
      type="radio"
      id="2med2"
      name="difficulty-ask"
      class="difficultyaskclass"
      value="medium"
    />
    <label for="2med2">Medium</label>
    <input
      type="radio"
      id="2hard3"
      name="difficulty-ask"
      class="difficultyaskclass"
      value="hard"
    />
    <label for="2hard3">Hard</label>
  </span>
</div>

JavaScript 事件委托实现 #

const parentElement = document.getElementById('radioContainer');

parentElement.addEventListener('change', (event) => {
  // 验证触发事件的目标是否为目标单选按钮
  if (event.target.classList.contains('difficultyaskclass')) {
    // 这里编写单选按钮状态切换后的业务逻辑
    console.log('当前选中的难度:', event.target.value);
    // 其他操作...
  }
});

关键说明 #

• change事件会在单选按钮状态变更时触发，且该事件会向上冒泡至父元素，这是实现委托的核心依据。
• 点击关联的<label>标签时，浏览器会自动切换单选按钮的状态并触发change事件，无需额外处理标签的点击逻辑。
• 这种方式无需循环绑定每个单选按钮，后续动态添加的同类型单选按钮只要处于该父容器下，都会自动被监听，完美契合事件委托的优势。

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