高效管理大量按钮状态与颜色：JavaScript事件委托与动态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.push(pixel); // 将每个像素的HTML字符串推入数组
}

// 将所有像素的HTML字符串连接起来，并设置到grid元素的innerHTML
grid.innerHTML = html.join('');

function handleGrid(e) {
  // 1) 检查被点击的元素是否是按钮
  if (e.target.matches('button')) {
    // 获取像素ID和按钮值
    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');
    });

    // 为被点击的按钮添加颜色类
    if (num === 0) {
      e.target.classList.add('red');
    } else {
      e.target.classList.add('green');
    }

    // 更新像素数组
    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 allButtonSelector = '.buttons button';
    const allButtons = grid.querySelectorAll(allButtonSelector);

    // 移除所有按钮的绿色类
    allButtons.forEach(button => {
      button.classList.remove('green')
    });

    // 获取所有匹配指定data-num的按钮
    const singleButtonSelector = `button[data-num="${num}"]`;
    const singleButtons = grid.querySelectorAll(singleButtonSelector);

    // 为匹配的按钮添加绿色类
    singleButtons.forEach(button => {
      button.classList.add('green');
    });
  }
}

/* 容器布局 */
.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; }

<section class="grid"></section>
<section class="controls">
  <button data-num="0">Set all to 0</button>
  <button data-num="1">Set all to 1</button>
  <button data-num="2">Set all to 2</button>
  <button data-num="3">Set all to 3</button>
</section>