本文讲解如何在 addEventlistener 的回调中通过事件对象自然获取触发事件的按钮文本内容，避免使用 bind、闭包传参或全局变量，实现 clean、可维护的 etch-a-sketch 画布重绘逻辑。
在构建响应式画布（如 Etch-a-Sketch）时，一个常见需求是：点击不同尺寸按钮（如 “16×16″、”32×32″）后，动态清空并按新规格重绘像素网格。关键难点在于——如何让 redrawBoard() 或 drawBoard() 函数“知道”当前点击的是哪个尺寸？ 而又不破坏事件监听器的简洁性（即不传参、不 .bind()、不依赖全局状态）。
答案是：利用事件对象（Event）中的 event.target 属性。当点击事件触发时，event.target 指向实际被点击的 dom 元素（即
✅ 正确做法：在箭头函数中解构 event 并访问 target
将你的事件监听逻辑从：
canvasSizeButton.forEach(button => button.addEventListener('click', () => { redrawBoard(); }));改为：
canvasSizeButton.forEach(button => button.addEventListener('click', (event) => { const clickedText = event.target.textContent; // ✅ 获取按钮文字，如 "32x32" redrawBoard(clickedText); // 现在可以安全传参了 }) );⚠️ 注意：此时 redrawBoard() 需支持接收参数。但你原问题中“不想传参”，是因为担心破坏调用链。其实只需稍作重构即可兼顾清晰性与灵活性：
? 推荐重构方案（无 bind、无全局、无冗余）
function drawBoard(sizeStr = "16x16") { // 解析尺寸字符串，例如 "32x32" → boardSize = 32, pixelDivider = 2 const [width, height] = sizeStr.split('x').map(Number); const boardSize = width; // 假设为正方形 let pixelDivider = 1; if (boardSize === 32) pixelDivider = 2; else if (boardSize === 64) pixelDivider = 4; // else 默认 16 → pixelDivider = 1 const pixelSize = 40 / pixelDivider; drawContainer.innerhtml = ''; // 更简洁地清空容器 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(sizeStr) { drawBoard(sizeStr); // 直接委托给 drawBoard 处理尺寸逻辑 } // 绑定事件：每个按钮点击时，自动把自身文本传入 document.querySelectorAll('.canvas-size-button').forEach(btn => btn.addEventListener('click', (e) => redrawBoard(e.target.textContent)) );? 为什么 this 不可靠？（补充说明）
在箭头函数中，this 不绑定到 DOM 元素（它继承外层作用域的 this），所以 this.textContent 会失败。而 event.target 是标准、稳定、语义明确的访问方式，兼容所有现代浏览器，且无需额外绑定。
? 不推荐的替代方案（及原因）
- ❌ button.addEventListener(‘click’, redrawBoard.bind(NULL, button.textContent))
→ 过早求值（绑定时 textContent 尚未更新）、代码冗余、违反事件驱动原则。 - ❌ 在 drawBoard() 内部重新查询 .canvas-size-button.activ 类
→ 需手动管理激活态（增加 css 和 js 负担），耦合度高。 - ❌ 使用全局变量暂存 lastClickedSize
→ 破坏函数纯度，多按钮并发点击时易出错，难以测试。
✅ 最佳实践总结
| 方案 | 是否推荐 | 理由 |
|---|---|---|
| event.target.textContent（事件内直接读取） | ✅ 强烈推荐 | 零副作用、语义清晰、符合 DOM 事件规范 |
| event.currentTarget | ⚠️ 可选（需理解区别） | 若监听在父容器上，currentTarget 是监听器绑定的元素；此处监听在 button 上，二者等价 |
| CSS 自定义属性（如 data-size=”32″） | ✅ 进阶推荐 | 更健壮（避免空格/换行干扰），示例： → e.target.dataset.size |
✅ 小技巧：为提升健壮性，建议 HTML 中使用 data-* 属性声明尺寸：32×32JS 中则用 e.target.dataset.size 获取数字，避免字符串解析错误。
至此，你已掌握一种简洁、专业、可扩展的事件驱动尺寸切换模式——无需 bind、不污染全局、逻辑内聚，完美适配 Odin Project 的 Etch-a-Sketch 项目要求。