必须用 addEventListener 而非 onclick 属性；报 null 错因 DOM 未加载完，需将脚本放 </body> 前或用 DOMContentLoaded；动态元素用事件委托；批量绑定用 querySelectorAll；注意闭包与内存泄漏，及时 removeEventListener。
别用 onclick 属性写在 HTML 标签里，除非你只是临时调试或写个静态单页；真要进项目、要维护、要加逻辑，必须用 addEventListener。
为什么 document.getElementById(...).addEventListener 会报错 null？
最常见原因是脚本执行时 DOM 还没加载完，getElementById 找不到元素，返回 null，接着调 addEventListener 就崩了。
- 确保 JS 代码放在
</body>前，或包裹在DOMContentLoaded事件里：document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById('myBtn'); btn.addEventListener('click', handler); }); - 不要把 script 放在 head 里又不加
defer—— 那等于“还没画完图就去点按钮” - 检查 ID 是否拼错，HTML 中是
id="save-btn"，JS 里却写成getElementById('save_btn')，下划线和短横线不通用
动态插入的按钮点不了？不是绑定漏了，是根本没绑上
用 AJAX 或模板渲染出来的按钮，初始化阶段不存在，querySelector 找不到，硬绑没用。
- 改用事件委托：监听一个始终存在的父容器（比如
id="form-container"），再判断event.target是不是目标按钮document.getElementById('form-container').addEventListener('click', (e) => { if (e.target.matches('button[data-action="submit"]')) { handleSubmit(e.target); } }); - 别用
document.body或document做委托根节点——太宽泛，容易误触发，也影响性能 - 如果父容器本身可能被整个替换（比如 Vue/React 的组件重渲染），那得监听更外层的稳定节点，比如
id="app"
多个按钮想共用同一套逻辑？别复制粘贴 addEventListener
用 querySelectorAll 拿 NodeList，再 forEach 绑定，比写十遍 getElementById 干净得多。
立即学习“前端免费学习笔记（深入）”；
- HTML 中统一加 class：
<button class="action-btn" data-type="delete">删</button> - JS 里一次搞定：
document.querySelectorAll('.action-btn').forEach(btn => { btn.addEventListener('click', () => { const type = btn.dataset.type; console.log(`执行 ${type} 操作`); }); }); - 注意：不要在循环里用
var声明函数内变量，闭包问题会导致所有按钮都拿到最后一个值；一律用const或let
真正难的从来不是“怎么绑”，而是“什么时候该解绑”——比如 SPA 页面切换后旧按钮还在内存里挂着监听器，又没清理，就是静默内存泄漏。只要涉及模块卸载、组件销毁、或者反复创建销毁按钮，removeEventListener 就不是可选项，是必选项。
