内联事件处理器（如onclick）导致react/vue事件委托失效，因其绕过框架事件系统、污染全局作用域、无法统一管理且不能被自动清理；动态渲染时易引发重复触发或绑定丢失，调试不可见，应彻底禁用on*属性并改用addeventlistener。
内联事件处理器（如 onclick）会破坏现代框架的事件委托机制，根本原因不是“写法旧”，而是它绕过了框架的事件系统、污染全局作用域、且无法被统一管理。
为什么内联事件会让 React/Vue 的事件委托失效
React 和 Vue 的事件绑定本质是「合成事件 + 事件委托到 document 或根容器」。一旦你在 DOM 上写了 onclick="handleClick()"，这个 handler 就脱离了框架控制流：它在全局作用域执行、不经过合成事件池、无法被 stopPropagation() 拦截（除非你手动传 event）、也不响应框架的生命周期更新。
- React 中，
onClick是声明式绑定，由ReactEventListener统一接管；而onclick是原生冒泡事件，直接触发，跳过所有 React 调度逻辑 - Vue 的
@click编译后也是通过addEventListener注册，但若 DOM 已有onclick属性，它会先执行——顺序不可控，结果不可预测 - 更麻烦的是：框架无法自动清理内联事件，
removeEventListener对它完全无效
动态渲染时 onclick 属性导致事件重复绑定或丢失
服务端模板或 CMS 输出的 HTML 常含 onclick，前端 JS 再用 addEventListener 绑定同一事件，就会出现「点一次触发两次」：一次来自内联，一次来自 JS 监听器。更糟的是，若 JS 在 DOM 更新后重新绑定（比如表格重绘），onclick 还在，但新插入的元素可能没绑上 JS 监听器——造成部分按钮可点、部分失灵。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 排查方法：
getEventListeners(element)在 Chrome 控制台里只能看到addEventListener绑定的监听器，onclick不会显示 - 修复原则：不要试图「覆盖」
onclick，而是接管它——用element.removeAttribute('onclick')后再addEventListener，但必须确保没有其他脚本依赖该属性 - 安全做法：把内联逻辑抽成函数，再在 JS 中复用：
el.addEventListener('click', handleClick)，而非删掉再重写
模块作用域下 onclick 调用报 ReferenceError 的真实原因
当你用 <script type="module"></script> 加载 JS，里面定义的 function handleClick() {} 默认不在 window 上。而 onclick="handleClick()" 执行时，JS 引擎只在全局找 window.handleClick，自然报 ReferenceError: handleClick is not defined。
- 临时 workaround（不推荐）：
window.handleClick = handleClick显式挂载，但破坏模块封装，且易冲突 - 正确路径：彻底弃用
onclick，改用addEventListener，它天然支持模块内函数引用 - 注意：即使你写了
onclick="window.handleClick()"，也得确保window.handleClick确实存在——很多构建工具（如 Vite/Webpack）默认不暴露模块变量到全局
真正麻烦的不是语法报错，而是内联事件和框架委托混用时那种「有时生效、有时失效、调试时找不到来源」的状态——它不会立刻崩，但会让交互逻辑变成黑盒。最稳妥的做法，是从模板层就约定禁用所有 on* 属性，把事件入口收束到 JS 或框架指令中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
