最推荐使用 addEventListener 替代内联 onclick，因其支持局部函数、多处理器绑定、精确解绑及事件选项配置，且符合 HTML 与 JS 职责分离原则；内联 onclick 要求函数全局可见，存在作用域和维护性问题。
onclick 事件写在 HTML 标签里最直接
直接在
、
或其他可交互标签中加
属性，值是 JavaScript 表达式或函数调用。浏览器会自动将其包装成事件处理函数执行。
常见写法示例：
注意：
的值不是函数定义，而是「要执行的 JS 代码」；所以不能写
（语法错误），但可以写
。
函数必须全局可访问，否则 onclick 会报
属性内调用的函数名，必须在全局作用域（即
上）存在。ES6 模块、
或函数表达式默认不挂载到全局，会导致点击时报错
。
立即学习
“
前端免费学习笔记（深入）
”；
解决办法（选其一）：
把函数声明写成
（函数声明会提升且默认挂到
）
显式挂载：
或
避免用
，改用
（推荐，见下一条）
更推荐用
替代内联 onclick
内联
削弱了 HTML 和 JS 的职责分离，调试困难，无法动态增删，也不支持事件捕获/选项配置（比如
）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
等效替代写法：
优势包括：
函数可以是局部变量、模块内定义，无需暴露到全局
同一元素可绑定多个 click 处理器，互不覆盖
能用
精确解绑
支持
、
等细粒度控制
移动端点击有 300ms 延迟？
同样受影响
原生
在 iOS Safari 和旧版 Android 浏览器中仍受点击延迟影响，不是它独有的问题——所有基于
事件的交互都一样。真正解决要靠：
在
中加
（必需）
使用
或现代方案如
引入
库（已过时）或直接用 CSS
别指望换种写
的方式就能绕过这个底层行为。
内联
能用，但只适合极简原型或遗留系统补丁；真实项目里，函数作用域、调试性、可维护性这几个硬约束，很快就会让你切到
路线上。
onclick
onclickonclick="function() { ... }"onclick="doSomething(); return false;"ReferenceErroronclickwindowconst handleClick = () => {...}Uncaught ReferenceError: handleClick is not definedfunction handleClick() { ... }windowwindow.handleClick = function() { ... };window.handleClick = () => { ... };onclickaddEventListeneraddEventListeneronclick{ once: true }
removeEventListenerevent.preventDefault()event.stopPropagation()onclickonclickclicktouchstartpointerdownfastclicktouch-action: manipulationonclickonclickaddEventListener