onclick会覆盖前一个事件处理函数，因其是DOM元素属性而非队列，每次赋值直接替换；addEventListener则将回调存入监听器列表，支持多函数叠加执行、阶段控制及动态增删。
直接在 HTML 标签上写 onclick 是能用，但不是“推荐用法”——它适合快速验证、原型调试或静态小页面；一旦逻辑变多、多人协作或需要复用，就会立刻暴露覆盖、耦合、难调试的问题。
为什么 onclick 属性会覆盖已有处理函数
HTML 元素的 onclick 是一个属性，本质是 DOM 接口上的 onclick 属性（类型为 Function | null），每次赋值都会替换前一个值。
- 比如先后执行
btn.onclick = handlerA和btn.onclick = handlerB，最终只有handlerB生效 - 内联写法
<button onclick="doA(); doB();">看似执行多个操作，实则整个字符串被解析为单个函数体，仍属“一次赋值” - 无法用
removeEventListener解绑——因为没保存函数引用，也没走监听器注册流程
addEventListener 怎么解决重复绑定和移除问题
它不操作元素属性，而是把回调存进内部监听器列表，支持叠加、按需移除。
- 同一元素可多次调用
element.addEventListener('click', fn1)和element.addEventListener('click', fn2)，两者都会触发 - 移除时必须传入**完全相同的函数引用**：
element.removeEventListener('click', fn1)，匿名函数无法移除 - 若需动态控制，建议用具名函数或
bind后缓存引用，例如：const handler = handleClick.bind(null, 'video');，再传入addEventListener和后续removeEventListener -
useCapture参数设为true可在捕获阶段响应，常用于事件委托场景（如在document上监听所有按钮点击）
内联 onclick 里传参容易出什么错
字符串拼接参数看似方便，但引号嵌套、转义、作用域限制极易翻车。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<button onclick="handleClick('user-123')">没问题；但<button onclick="handleClick('John's profile')">会因单引号未闭合报语法错误 - 避免混用引号：统一用双引号包裹属性值，内部用单引号；或改用
JSON.stringify处理动态字符串 - 不能直接访问模块作用域变量，比如 ES6 模块里的
const API_URL = '/api'在内联脚本里不可见 - 更稳妥的做法是用
data-属性存数据，再在函数里读取：<button data-id="123" onclick="handleClick(this)">，函数内用event.target.dataset.id
哪些场景还值得用内联 onclick
不是全盘否定，而是明确它的适用边界——它只在满足“一次性、无状态、无协作”时才真正省事。
- 生成静态报告页、演示页、CLI 工具输出的 HTML 快照，不需要长期维护
- 调试时临时加一句
alert或console.log快速验证 DOM 节点是否可达 - 服务端渲染模板（如 PHP/Python Jinja）中，参数由后端注入且固定，前端无需接管生命周期
- 注意：哪怕只用一次，也别写
<button onclick="location.href='/'">这类跳转——应改用<a href="/">，语义与可访问性更正确
真正麻烦的从来不是“怎么写”，而是“改的时候谁在用、谁在依赖、有没有副作用”。onclick 属性看着短，删掉一行可能就让某个埋点或自动化测试失效；而 addEventListener 多写几行，换来的是可追踪、可隔离、可测试的交互链路。
