本文讲解如何在 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)，也不必在全局维护临时变量，代码更健壮、可读性更高，也完全符合事件驱动编程的设计哲学。
