应优先使用addeventlistener而非onclick属性，因其支持多次绑定、可移除、作用域清晰、便于调试和复用；onclick仅适用于纯静态小页面，现代开发及框架中应避免使用。
onclick属性直接写在HTML标签里就行
只要元素支持交互（比如 <button></button>、<a></a>、<div>），就能加 <code>onclick 属性。它接收一段 JavaScript 代码字符串，点击时执行。
常见写法是调用函数：
<button onclick="handleClick()">点我</button>对应 JS：
function handleClick() { console.log('被点了'); }
- 注意函数名必须在全局作用域可访问（不能是
const handleClick = () => {...}这种块级声明） - 如果要传参，得用引号包裹字符串参数：
onclick="doAction('user123')"；数字或布尔值可以不加引号，但建议统一加，避免歧义 -
onclick里的代码是字符串，所以不能直接写箭头函数或let/const声明
onclick里写内联JS容易出错的几个地方
很多人直接在 onclick 里写逻辑，比如：onclick="alert('hello'); count++"。这种写法看着快，但问题不少：
- 作用域混乱：所有变量都依赖全局，
count必须提前声明为window.count或全局var count - 引号嵌套崩溃：比如想 alert 一个带单引号的字符串，
onclick="alert('It's me')"会语法报错，得写成onclick="alert('It\'s me')"或换双引号 - 调试困难：错误堆栈指向 HTML 行号，而不是真实 JS 文件位置
- 无法复用：同一段逻辑在多个按钮上复制粘贴，改一处漏一处
更稳妥的做法：用addEventListener代替onclick属性
现代开发基本不用 onclick 属性，而是用 addEventListener 绑定事件。它解耦 HTML 和 JS，支持多次绑定、可移除、作用域清晰。
示例：
<button id="myBtn">点我</button>
const btn = document.getElementById('myBtn');<br>btn.addEventListener('click', function() {<br> console.log('事件触发了');<br>});
- 同一个元素可以绑定多个
click监听器，互不影响 - 函数内
this指向当前元素（onclick属性里this是window） - 支持传参通过闭包或
data-属性实现，比内联传参更安全 - 可以用
removeEventListener精确取消，onclick只能覆盖赋值
React/Vue等框架里别碰onclick属性
在 React 中写 onclick 是无效的，必须用 onClick（驼峰），且传函数引用，不是字符串：
<button onclick="{handleClick}">点我</button>
Vue 里用 @click 指令：
<button>点我</button>
- 框架会接管事件绑定和清理，手动混用原生
onclick容易导致内存泄漏或重复绑定 - 服务端渲染（SSR）场景下，
onclick属性可能被忽略或执行两次 - 框架组件封装后，
onclick不会透传到真实 DOM，除非显式用...$attrs或v-bind="$attrs"
onclick 属性凑合能跑；但只要涉及状态管理、复用、协作或后续维护，就该切到 addEventListener —— 那些看似省事的内联写法，后期 debug 花的时间远超多写两行代码的成本。
