如何在事件监听中获取被点击按钮的文本内容而不使用 bind 或传参

本文讲解如何在 addeventlistener 的箭头函数中通过事件对象正确获取触发按钮的 innertext，从而实现动态重绘画布尺寸，避免使用 bind 或显式传参的冗余方案。

在 JavaScript 事件处理中，当为多个按钮绑定同一回调函数（如 redrawBoard）时，常需识别具体是哪个按钮触发了事件，尤其像 Etch-a-Sketch 这类需根据按钮文本（如 "16x16"）动态调整画布尺寸的场景。你原代码中 canvasSizeButton.forEach(... => redrawBoard()) 无法将按钮上下文传递给 redrawBoard，而直接传参或使用 .bind() 会破坏函数复用性——其实，标准且优雅的解法是：利用事件对象的 event.target 属性，在回调中直接访问被点击按钮的 textContent 或 innerText。

关键在于：不要在 addEventListener 中调用无参函数，而应在事件处理器内部读取 event.target，再将其值传入逻辑函数。以下是重构后的推荐写法：

function drawBoard(sizeStr) {
  // 解析按钮文本，如 "32x32" → boardSize = 32
  const match = sizeStr.match(/^(\d+)x\1$/);
  const boardSize = match ? parseInt(match[1], 10) : 16;

  // 计算像素尺寸（保持总画布区域约 640×640px）
  const pixelSize = 640 / boardSize;

  // 清空容器
  drawContainer.innerHTML = '';

  // 生成 boardSize × boardSize 个像素 div
  for (let i = 0; i < boardSize * boardSize; i++) {
    const div = document.createElement('div');
    div.style.width = `${pixelSize}px`;
    div.style.height = `${pixelSize}px`;
    div.classList.add('pixel');
    drawContainer.appendChild(div);
  }
}

function redrawBoard() {
  // 清空现有像素（可选：也可直接用 innerHTML = '' 替代循环）
  drawContainer.innerHTML = '';
  // 注意：此处不执行 drawBoard！逻辑应由事件处理器驱动
}

const drawContainer = document.querySelector('.sketch');
const canvasSizeButton = document.querySelectorAll('.canvas-size-button');

// ✅ 正确做法：在事件处理器中捕获 event，并提取 target.textContent
canvasSizeButton.forEach(button => {
  button.addEventListener('click', function(event) {
    const clickedText = event.target.textContent; // ← 核心：获取当前按钮文本
    drawBoard(clickedText); // 
直接传入，逻辑清晰、职责分明
  });
});

// 初始化默认画布（例如 16x16）
drawBoard('16x16');

? 注意事项与最佳实践：

• 使用 function(event) { ... } 而非箭头函数，可确保 this 指向当前按钮（虽本例未用 this，但语义更明确）；若坚持用箭头函数，仍可通过 event.target 安全访问。
• 避免在 drawBoard() 内部再次查询 DOM（如遍历按钮），这违背单一职责原则，也降低可测试性。
• 推荐用正则 /^(\d+)x\1$/ 校验格式，确保 "16x16" 合法，而拒绝 "16x32" 等无效输入。
• 性能优化：drawContainer.innerHTML = '' 比循环 removeChild 更简洁高效（现代浏览器已对此做了优化）。

通过这一模式，你既无需 bind(this, arg)，也不必在全局维护临时变量，代码更健壮、可读性更高，也完全符合事件驱动编程的设计哲学。