直接用addEventListener绑定最稳妥，因onclick属性易覆盖、难维护且耦合结构；报null主因是DOM未就绪，应将脚本置于</body>前或用DOMContentLoaded包裹，动态元素需事件委托。
直接用 addEventListener 绑定，别碰 onclick 属性——除非你只写个临时 demo。
为什么 document.getElementById().addEventListener 会报 null
脚本执行时 DOM 还没加载完，getElementById 找不到元素，返回 null，再调 addEventListener 就崩了。
- 把
<script>放在</body>前是最简单可靠的解法 - 或者用
DOMContentLoaded包一层：document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById('myBtn'); btn.addEventListener('click', handler); }); - 检查 ID 拼写：HTML 里是
id="save-btn"，JS 里写成getElementById('save_btn')就失效（短横线 ≠ 下划线）
动态插入的按钮点不了怎么办
不是绑定漏了，是它根本不存在于初始 DOM 中，querySelector 根本查不到。
- 用事件委托：监听一个始终存在的父容器，比如
id="form-container" - 在回调里用
event.target.matches('button[data-action="submit"]')判断是否点中目标 - 别用
document.body或document做委托根节点——太宽泛，容易误触发，也影响性能 - 如果父容器本身会被整个替换（如 Vue/React 组件重渲染），得往上找更稳定的节点，比如
id="app"
整张表格或标签栏怎么设为可点击区域
表格不是天然“一块”可点的；标签栏也不是语义上可交互的容器——它们默认没有焦点能力、没绑定行为、也没视觉反馈。
立即学习“前端免费学习笔记（深入）”；
- 表格要防点击缝隙：用
border-collapse: collapse消除border-spacing造成的空隙，再配合event.target.closest('td, th')判断点击位置 - 标签栏（
<ul class="tabs">）必须加tabindex="0"才能被键盘聚焦，CSS 加cursor: pointer提示可点，JS 必须手动绑click事件 - 更推荐语义化写法：直接用
<a>或<button>包裹文字，天然可聚焦、可点击、带语义，搜索引擎和读屏器都认
真正难的不是“怎么绑”，而是“绑在哪”和“点中了没”。移动端热区至少 44×44px，padding 要配 display: inline-block 才生效，touch-action: none 或 pointer-events: none 会静默拦截——这些细节不验证真机，光看桌面浏览器永远发现不了。
