直接用addeventlistener绑定最稳妥，因其支持多次绑定、互不覆盖且可移除；onclick属性或element.onclick=handler会覆盖前值、难维护；内联onclick="myfunc()"导致结构与行为耦合、xss风险高、无法访问event对象、函数须全局可见。
addEventListener 绑定最稳妥，onclick 属性或 element.onclick = handler 容易覆盖、难维护，不推荐用于实际项目。
为什么不能直接写 onclick="myFunc()"
这种内联写法会让 HTML 和 JS 耦合，调试困难，复用性差，且无法传参（除非拼字符串，极易 XSS）。更严重的是：它把逻辑暴露在 DOM 层，组件化、模块打包时几乎无法处理。
- 常见错误现象：
onclick="handleClick(id)"中的id是变量还是字符串？若没加引号，浏览器会当成全局变量查找，报ReferenceError - 使用场景：仅限原型验证、临时调试，上线代码必须剥离
- 性能影响：每次渲染都重新解析字符串，比函数引用慢，且无法利用闭包或模块作用域
document.getElementById().onclick = handler 会出什么问题
这是 DOM0 级绑定，语法简单但有硬伤：同一事件只能存一个处理函数，后赋值的会彻底覆盖前一个。
- 常见错误现象：两个模块都执行
btn.onclick = saveForm和btn.onclick = logClick，后者生效，前者静默丢失 - 参数差异：无法传额外上下文，
this指向按钮，但想访问外部数据就得靠闭包或全局变量 - 兼容性影响：现代框架（React/Vue）完全不支持这种方式，SSR 渲染时可能因执行时机错乱而报
Cannot set property 'onclick' of null
addEventListener('click', handler) 的正确用法
标准、可叠加、可移除，是唯一推荐的生产级绑定方式。关键在三点：元素存在、事件类型准确、监听器可管理。
- 确保 DOM 加载完成：不要在
<script></script>标签里直接调用getElementById，除非脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
