<p>内联 onclick 会导致重复执行和调试困难，因其是全局字符串且无法断点；应统一用 addEventListener 替代，并通过事件委托、data-* 属性解耦参数，确保行为与结构彻底分离。</p>
为什么 onclick="doSomething()" 会引发重复执行和调试困难
直接在 HTML 里写 onclick 属性，最常导致的问题不是“不能用”，而是“用了却不知道被谁触发了几次”。比如按钮同时有 onclick="printReceipt()" 和 JS 中 addEventListener('click', printReceipt)，结果点击一次弹出两个打印窗口，收据编号还多加了一次。
根本原因在于：HTML 内联事件是全局执行的字符串，无法被 debugger 断点捕获；而 addEventListener 是可追踪、可移除、可复用的函数引用。两者共存时，浏览器不报错，但行为叠加——这是静默故障，不是语法错误。
- 内联
onclick在页面加载时就解析并绑定，无法控制执行时机（比如等 DOM 就绪后再绑定） - 无法监听事件冒泡/捕获阶段，
event.stopPropagation()在内联写法中完全不可用 - 多个
onclick属性会覆盖（后写的生效），但多个addEventListener可共存
如何用 addEventListener 彻底替代所有 onclick 属性
替换不是简单删掉 onclick 属性就完事。关键是要让 JS 能稳定获取到目标元素，并在合适时机绑定事件。常见踩坑点是：JS 执行早于 DOM 渲染，导致 getElementById 返回 null。
- 把
<script></script>标签放在
