onclick属性虽简单但不推荐，因其混杂HTML与JS、难调试、易XSS；现代项目应优先用addEventListener或框架事件机制（如React的onClick、Vue的@click）。
onclick 属性直接写在 button 标签里就行，但不推荐在现代项目中这么用
直接写 onclick 属性最简单，比如 <button onclick="alert('clicked')">点我</button>，能立刻响应点击。但它把 HTML 和 JS 混在一起，调试难、复用差、没法传参（除非拼字符串）、还容易被 XSS 利用。真实项目里，尤其涉及状态管理或组件化时，这种写法基本会被 ESLint 拦住。
addEventListener 是更安全可控的绑定方式
给 button 元素绑定事件，应该优先用 addEventListener。它支持多次绑定、可移除、能精确控制事件流阶段（capture 参数），而且函数作用域干净。
常见写法：
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', function() {
console.log('按钮被点了');
});
- 必须等 DOM 加载完再执行，否则
querySelector找不到元素（放<script>在</body>前，或用DOMContentLoaded） - 如果按钮是动态插入的，要用事件委托——监听父容器，再用
event.target判断是不是目标button - 避免重复绑定：同一个回调函数多次调用
addEventListener，会触发多次；要移除时得用相同引用，或加{ once: true }选项
React/Vue 等框架里别碰 onclick 属性
框架有自己的事件系统，比如 React 的 onClick（注意是驼峰）不是原生 onclick，它经过合成事件封装，有自动绑定/解绑、事件池复用等优化。直接写 onclick 会绕过框架机制，导致状态不同步或内存泄漏。
立即学习“前端免费学习笔记（深入）”；
错误示例：<button onclick={handleClick}>点我</button>（React 中无效）
正确写法：<button onClick={handleClick}>点我</button>
-
onClick接收的是函数引用，不是字符串；写成onClick={handleClick()}就会立即执行，而不是点击时执行 - 需要传参时，用箭头函数或
bind，但要注意闭包和性能（频繁渲染时避免内联创建新函数） - Vue 中对应的是
@click，不是onclick，也不能混用
onclick 字符串执行时 this 指向 window，不是 button 元素
这是最容易踩的坑：在 <button onclick="console.log(this)"> 里，this 是 window，不是当前按钮。想访问按钮本身，得显式传参：<button onclick="handleClick(this)">，然后定义 function handleClick(el) { console.log(el); }。
而用 addEventListener 时，回调里的 this 默认就是触发事件的元素（除非用箭头函数——它没有自己的 this）。
- 箭头函数不能用作事件监听器的回调，因为会丢失
this绑定 - 如果用了
bind或类方法，要注意是否改变了this指向 - 现代写法更倾向用
event.currentTarget而非this，语义更明确
onclick 属性只适合原型验证或超简单静态页。只要涉及状态、异步、复用、测试，就得切到 addEventListener 或框架的事件机制。漏掉 DOM 加载时机、混淆原生和框架事件、误用箭头函数当监听器——这三个点，几乎覆盖了 80% 的实际报错。 
