JavaScript中大规模动态按钮状态管理与事件委托最佳实践

<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); // 后续会详细讲解事件委托

// 初始化像素数据数组，例如16个像素，全部填充为0
const pixels = new Array(16).fill(0);

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

// 循环生成16个像素盒的HTML
for (let i = 0; i < 16; i++) {
  const pixelHtml = `
    <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(pixelHtml);
}

// 将所有HTML字符串拼接成一个，并一次性插入到DOM中
grid.innerHTML = html.join('');

// handleGrid 函数处理网格内所有按钮的点击事件
function handleGrid(e) {
  // 1) 检查点击事件是否来源于一个按钮元素
  if (e.target.matches('button')) {
    // 获取被点击按钮的父级像素盒的 data-id
    const pixelId = Number(e.target.closest('.pixel').dataset.id);
    // 获取被点击按钮的 data-num
    const num = Number(e.target.dataset.num);

    // 缓存被点击按钮的直接父元素（即 .buttons 容器）
    const parentButtonsContainer = e.target.closest('.buttons');
    // 选中该像素盒内所有按钮
    const buttonsInGroup = parentButtonsContainer.querySelectorAll('button');

    // 遍历所有按钮，移除已有的颜色类（清除旧状态）
    buttonsInGroup.forEach(button => {
      button.classList.remove('green', 'red');
    });

    // 根据 num 值给被点击的按钮添加对应的颜色类（设置新状态）
    if (num === 0) {
      e.target.classList.add('red');
    } else {
      e.target.classList.add('green');
    }

    // 更新像素数据数组：如果 num 大于 0，则设置为 num，否则设置为 0
    pixels[pixelId] = num > 0 ? num : 0;

    console.log(JSON.stringify(pixels)); // 打印更新后的数据数组
  }
}

<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>

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

// handleControls 函数处理控制按钮的点击事件
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'); // 清除所有颜色
    });

    // 选中所有 data-num 匹配的按钮，并添加绿色类
    const targetButtons = grid.querySelectorAll(`button[data-num="${num}"]`);
    targetButtons.forEach(button => {
      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; }

/* 控制台样式，仅为fiddle环境优化 */
.as-console-wrapper { max-height: 20px !important; bottom: 0; }