本文讲解如何在 addeventlistener 的回调中通过事件对象自然获取触发事件的按钮文本内容，避免使用 bind、闭包传参或全局变量，实现 clean、可维护的 etch-a-sketch 画布重绘逻辑。
在构建响应式画布（如 Etch-a-Sketch）时，一个常见需求是：点击不同尺寸按钮（如 "16x16"、"32x32"）后，动态清空并按新规格重绘像素网格。关键难点在于——如何让 redrawBoard() 或 drawBoard() 函数“知道”当前点击的是哪个尺寸？ 而又不破坏事件监听器的简洁性（即不传参、不 .bind()、不依赖全局状态）。
答案是：利用事件对象（Event）中的 event.target 属性。当点击事件触发时，event.target 指向实际被点击的 DOM 元素（即 <button>），我们可直接从中读取 textContent 或 innerText。
✅ 正确做法：在箭头函数中解构 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"） | ✅ 进阶推荐 | 更健壮（避免空格/换行干扰），示例： <button class="canvas-size-button" data-size="32">32×32</button> → e.target.dataset.size |
✅ 小技巧：为提升健壮性，建议 HTML 中使用 data-* 属性声明尺寸：<button class="canvas-size-button" data-size="32">32×32</button>JS 中则用 e.target.dataset.size 获取数字，避免字符串解析错误。
至此，你已掌握一种简洁、专业、可扩展的事件驱动尺寸切换模式——无需 bind、不污染全局、逻辑内聚，完美适配 Odin Project 的 Etch-a-Sketch 项目要求。
