如何在 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 主动查询

1. 点击时给按钮添加 .active 类（移除其他同类按钮的该类）；
2. 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 画布系统。