如何结合Event Object、EventListener与子元素生成用户选择数量的按钮

先补全HTML结构，新增一个容器专门存放生成的按钮，避免和原布局混淆：

<div id="buttons">
  需要生成几个按钮？
  <label>1 <input name="numberButtons" type="radio" value="1"></label>
  <label>2 <input name="numberButtons" type="radio" value="2"></label>
  <label>3 <input name="numberButtons" type="radio" value="3"></label>
  <label>4 <input name="numberButtons" type="radio" value="4"></label>
  <label>5 <input name="numberButtons" type="radio" value="5"></label>
  <label>6 <input name="numberButtons" type="radio" value="6"></label>
  <label>7 <input name="numberButtons" type="radio" value="7"></label>
  <label>8 <input name="numberButtons" type="radio" value="8"></label>
</div>
<span id="done">确定</span>
<!-- 新增容器用于放置生成的按钮 -->
<div id="generated-buttons"></div>

然后编写JavaScript逻辑，结合EventListener、Event Object完成需求：

// 获取触发元素和生成按钮的容器
const doneElement = document.getElementById('done');
const buttonContainer = document.getElementById('generated-buttons');

// 给「确定」元素绑定点击事件
doneElement.addEventListener('click', function(event) {
  // 利用Event Object查看触发事件的元素（可选调试用）
  console.log('触发事件的元素:', event.target);

  // 获取选中的单选按钮
  const selectedOption = document.querySelector('input[name="numberButtons"]:checked');

  // 先清空容器，避免重复生成按钮
  buttonContainer.innerHTML = '';

  // 判断是否有选中项
  if (selectedOption) {
    const count = parseInt(selectedOption.value);
    // 循环生成对应数量的按钮
    for (let i = 1; i <= count; i++) {
      const newBtn = document.createElement('button');
      newBtn.textContent = `按钮 ${i}`;
      // 给每个生成的子按钮绑定点击事件
      newBtn.addEventListener('click', function(e) {
        alert(`你点击了${e.target.textContent}`);
      });
      buttonContainer.appendChild(newBtn);
    }
  } else {
    alert('请先选择要生成的按钮数量');
  }
});

关键说明 #

1. 事件监听绑定：使用addEventListener给「确定」元素绑定点击事件，这是标准的事件注册方式，比直接写onclick更灵活，支持绑定多个事件。
2. Event Object 应用：回调函数中的event参数就是事件对象，可以通过event.target获取触发事件的DOM元素，在复杂场景中还能用于事件委托、阻止默认行为等操作。
3. 选中值获取：通过document.querySelector结合:checked伪类，精准获取当前选中的单选按钮，避免遍历所有单选元素的冗余操作。
4. 子元素事件处理：动态生成按钮后，给每个子按钮单独绑定点击事件，实现子元素的交互逻辑，符合需求中对子元素的处理要求。
5. 重复生成处理：每次点击「确定」时先清空容器内的旧按钮，防止多次点击后按钮叠加。

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