必须用 addEventListener 而非 onclick 属性，避免污染 HTML、丢失事件、难以维护；计数变量需定义在事件外层作用域；显示容器应预先写入 HTML 并用 textContent 更新。
点击事件绑定必须用 addEventListener 而非 onclick 属性
直接写 onclick="count++" 看似简单，但会污染 HTML、难以维护，且无法复用逻辑。更关键的是，如果按钮被 JS 动态替换或重渲染，内联事件会丢失。
推荐始终用 addEventListener 绑定，确保事件监听与 DOM 生命周期解耦。
实操建议：
- 获取按钮元素用
document.getElementById或document.querySelector，避免用document.getElementsByTagName这类返回 HTMLCollection 的方法（容易漏索引） - 监听
click事件，不要监听mousedown或touchstart——除非你明确需要兼容触摸设备并做防抖 - 确保脚本在 DOM 加载完成后执行，要么把
<script>放在</body>前，要么用DOMContentLoaded事件包裹
计数变量必须定义在事件外层作用域
如果把 let count = 0 写在事件回调里，每次点击都会重新初始化为 0，计数永远是 1。
变量得放在函数外部或闭包中，保证状态持续存在。
常见错误现象：console.log(count) 总是输出 1，页面数字不累加。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
let count = 0;
const btn = document.getElementById('counter-btn');
btn.addEventListener('click', () => {
count++;
document.getElementById('count-display').textContent = count;
});
注意：textContent 比 innerHTML 更安全，避免 XSS；若需渲染富文本才换用后者。
显示区域要提前在 HTML 中预留且可稳定定位
很多人动态创建 <span> 或 append() 计数器，结果样式错乱或多次点击重复追加节点。
更稳妥的做法是 HTML 里就写好容器，比如 <span id="count-display">0</span>，JS 只负责更新内容。
使用场景差异：
- 单按钮单计数器：用
id定位最直接 - 多个按钮各自计数：改用
data-counter-id配合类选择器，避免 ID 冲突 - 需要持久化：可在更新后同步写入
localStorage.setItem('counter', count)，页面刷新不丢数
移动端点击有 300ms 延迟，但这里通常不用额外处理
现代 Chrome、Firefox 和 Safari 在启用 viewport 元标签后已默认禁用延迟，只要你的 HTML 有这行：<meta name="viewport" content="width=device-width, initial-scale=1">，就不必引入 fastclick 或监听 touchstart。
真正要小心的是：别给按钮加 cursor: pointer 却忘了 user-select: none，否则 iOS 上长按可能触发文字选中，干扰点击反馈。
性能影响很小——纯内存计数 + 文本更新，无重排（reflow），但若你在回调里频繁调用 getBoundingClientRect() 或操作 classList，就得警惕了。
复杂点在于多实例同步和跨 Tab 计数，那得上 StorageEvent 监听；但单页单按钮，就只是三个变量加一次监听的事——别过早抽象成类或 Hook。
