构建可伸缩交互式按钮组：利用事件委托与动态DOM操作实现高效状态管理

<div class="pixel" data-id="1">
  <span>Pixel 1</span>
  <div class="buttons">
    <button data-num="0">00</button>
    <button data-num="1">01</button>
    <button data-num="2">10</button>
    <button data-num="3">11</button>
  </div>
</div>

// 缓存主容器元素，并为其添加事件监听器
const grid = document.querySelector('.grid');
grid.addEventListener('click', handleGrid);

// 缓存控制区元素，并为其添加事件监听器
const controls = document.querySelector('.controls');
controls.addEventListener('click', handleControls);

// 创建一个包含16个0的数组，用于存储像素值
const pixels = new Array(16).fill(0);

// 用于缓存生成的HTML字符串的数组
const html = [];

// 循环生成16个像素单元的HTML
for (let i = 0; i < 16; i++) {
  const pixel = `
    <div class="pixel" data-id="${i}">
      <span>Pixel ${i + 1}</span>
      <div class="buttons">
        <button data-num="0">00</button>
        <button data-num="1">01</button>
        <button data-num="2">10</button>
        <button data-num="3">11</button>
      </div>
    </div>
  `;
  // 将每个像素单元的HTML字符串推入数组
  html.push(pixel);
}

// 将所有HTML字符串拼接成一个，并赋值给grid元素的innerHTML
grid.innerHTML = html.join('');

// 当grid元素捕获到来自其子元素的事件时...
function handleGrid(e) {
  // 1) 检查事件源是否为按钮元素
  if (e.target.matches('button')) {
    // 从最近的.pixel父元素获取data-id，从点击的按钮获取data-num
    const pixelId = Number(e.target.closest('.pixel').dataset.id);
    const num = Number(e.target.dataset.num);

    // 缓存按钮最近的.buttons父元素，并选择该父元素下的所有按钮
    const parent = e.target.closest('.buttons');
    const buttons = parent.querySelectorAll('button');

    // 遍历所有按钮，移除颜色类
    buttons.forEach(button => {
      button.classList.remove('green', 'red');
    });

    // 根据num值改变点击元素的类
    if (num === 0) {
      e.target.classList.add('red');
    } else {
      e.target.classList.add('green');
    }

    // 更新pixels数组！如果点击按钮的数字大于零，则将pixelId索引处的值设置为该数字，否则设置为零
    pixels[pixelId] = num > 0 ? num : 0;

    console.log(JSON.stringify(pixels));
  }
}

// 处理控制按钮的点击事件
function handleControls(e) {
  if (e.target.matches('button')) {
    const num = Number(e.target.dataset.num);

    // 移除所有按钮的绿色类
    const allButtons = grid.querySelectorAll('.buttons button');
    allButtons.forEach(button => {
      button.classList.remove('green', 'red'); // 确保移除所有颜色类
    });

    // 为匹配指定num值的所有按钮添加绿色类
    const singleButtons = grid.querySelectorAll(`button[data-num="${num}"]`);
    singleButtons.forEach(button => {
      if (num === 0) {
        button.classList.add('red');
      } else {
        button.classList.add('green');
      }
    });

    // 更新所有像素的数据
    pixels.fill(num); // 将所有像素值填充为num
    console.log(JSON.stringify(pixels));
  }
}

.grid, .buttons { display: grid; width: fit-content; height: fit-content; }
.grid { grid-template-rows: 60px 1fr; gap: 15px; grid-auto-flow: column; width: 580px; }
.buttons { margin-top: 0.25rem; grid-template-columns: 22px 1fr; gap: 3px; grid-auto-flow: row; aspect-ratio: 1; width: fit-content; }
.buttons button { display: flex; justify-content: center; align-items: center; width: 22px; }
.buttons button:hover { cursor: pointer; }
.pixel { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.green, .red { color: white; }
.red { background-color: red; }
.green { background-color: green; }
.controls { margin-top: 1rem; }
.controls button { margin-left: 0.25rem; }
.as-console-wrapper { max-height: 20px !important; bottom: 0; }