在为按钮绑定事件监听器时，无需通过 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 画布系统。
