如何在 addEventListener 中获取被点击按钮的文本内容_技术教程

在为按钮绑定事件监听器时，无需通过 bind 或额外参数即可直接访问触发事件的按钮元素及其文本内容，关键在于利用事件对象的 target 属性正确提取 innertext 或 textcontent。

在 JavaScript 事件处理中，addEventListener 的回调函数默认接收一个 Event 对象作为参数。该对象的 event.target 指向实际触发事件的 DOM 元素（即被点击的按钮），这正是我们获取按钮文本值的可靠来源。

你原代码中使用了箭头函数 () => redrawBoard()，导致无法访问 event 对象；而 this 在箭头函数中也不指向按钮（且严格模式下为 undefined）。因此，应改用带参数的标准函数或解构语法，并在 redrawBoard 或 drawBoard 中直接读取按钮文本。

✅ 正确做法：从事件对象中提取按钮文本

将事件监听逻辑重构如下：

canvasSizeButton.forEach(button => 
  button.addEventListener('click', (event) => {
    const clickedButton = event.target; // ✅ 获取被点击的按钮
    const boardSizeText = clickedButton.textContent.trim(); // 如 "16x16"

    // 清空画布并重绘
    redrawBoard();

    // 将尺寸信息传入 drawBoard —— 注意：此处需改造 drawBoard 接收参数
    drawBoard(boardSizeText);
  })
);

但问题要求 不传递参数 且 不使用 .bind()。此时可借助 闭包 + 事件委托 或更简洁的方式：在 redrawBoard 内部通过全局/模块级变量暂存当前按钮文本。不过更优雅、符合现代实践的方案是——让 drawBoard 自主读取最新激活按钮的状态。

✅ 推荐方案：用 CSS 类标记“当前选中按钮”，drawBoard 主动查询

点击时给按钮添加 .active 类（移除其他同类按钮的该类）；
drawBoard() 启动时查找带有 .active 的按钮，从中提取 textContent。

// 初始化：默认选中第一个按钮
canvasSizeButton[0].classList.add('active');

canvasSizeButton.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有 active 类，仅给当前按钮添加
    canvasSizeButton.forEach(btn => btn.classList.remove('active'));
    button.classList.add('active');

    redrawBoard(); // 无需传参
  });
});

function drawBoard() {
  // ✅ 主动查找当前激活的按钮
  const activeBtn = document.querySelector('.canvas-size-button.active');
  const boardSizeText = activeBtn ? activeBtn.textContent.trim() : '16x16';

  let pixelDivider = 1;
  let boardSize = 16;

  if (boardSizeText === '32x32') {
    pixelDivider = 2;
    boardSize = 32;
  } else if (boardSizeText === '64x64') {
    pixelDivider = 4;
    boardSize = 64;
  }

  const pixelSize = 40 / pixelDivider;

  // 清空后重建像素格
  drawContainer.innerHTML = ''; // 更简洁的清空方式
  for (let j = 0; j < boardSize; j++) {
    for (let i = 0; i < boardSize; i++) {
      const div = document.createElement('div');
      div.style.width = `${pixelSize}px`;
      div.style.height = `${pixelSize}px`;
      div.classList.add('pixel');
      drawContainer.appendChild(div);
    }
  }
}

✅ 优势：

完全避免参数传递与 bind；
drawBoard 逻辑自包含，职责清晰；
支持用户手动修改 DOM 或恢复
状态（如刷新后保留上次选择）；
易于扩展（例如添加 localStorage 持久化）。

⚠️ 注意事项

始终使用 .textContent（非 .innerText）获取纯文本，兼容性更好且不受 CSS 影响；
使用 trim() 防止空格干扰比较；
drawContainer.innerHTML = '' 比循环 removeChild 性能更高（尤其大网格）；
若需响应式像素尺寸，建议改用 CSS 自定义属性（如 --pixel-size）配合 style.setProperty()，提升渲染效率（参考答案中的 --pixelSize 方案）。

通过合理利用事件对象和 DOM 查询，你不仅能精准获取按钮文本，还能构建出更健壮、可维护的 Etch-a-Sketch 画布系统。