最推荐使用 addEventListener 替代内联 onclick，因其支持局部函数、多处理器绑定、精确解绑及事件选项配置，且符合 HTML 与 JS 职责分离原则；内联 onclick 要求函数全局可见，存在作用域和维护性问题。
onclick 事件写在 HTML 标签里最直接
直接在 <button>、<a> 或其他可交互标签中加 onclick 属性，值是 JavaScript 表达式或函数调用。浏览器会自动将其包装成事件处理函数执行。
常见写法示例：
<button onclick="alert('点了！')">点我</button>
<button onclick="handleClick(123)">传参调用</button>
注意：onclick 的值不是函数定义，而是「要执行的 JS 代码」；所以不能写 onclick="function() { ... }"（语法错误），但可以写 onclick="doSomething(); return false;"。
函数必须全局可访问，否则 onclick 会报 ReferenceError
onclick 属性内调用的函数名，必须在全局作用域（即 window 上）存在。ES6 模块、const handleClick = () => {...} 或函数表达式默认不挂载到全局，会导致点击时报错 Uncaught ReferenceError: handleClick is not defined。
立即学习“前端免费学习笔记（深入）”；
解决办法（选其一）：
- 把函数声明写成
function handleClick() { ... }（函数声明会提升且默认挂到window） - 显式挂载：
window.handleClick = function() { ... };或window.handleClick = () => { ... }; - 避免用
onclick，改用addEventListener（推荐，见下一条）
更推荐用 addEventListener 替代内联 onclick
内联 onclick 削弱了 HTML 和 JS 的职责分离，调试困难，无法动态增删，也不支持事件捕获/选项配置（比如 { once: true }）。
等效替代写法：
<button id="myBtn">点我</button>
<script>
document.getElementById('myBtn').addEventListener('click', function() {
console.log('安全触发');
});
</script>
优势包括：
- 函数可以是局部变量、模块内定义，无需暴露到全局
- 同一元素可绑定多个 click 处理器，互不覆盖
- 能用
removeEventListener精确解绑 - 支持
event.preventDefault()、event.stopPropagation()等细粒度控制
移动端点击有 300ms 延迟？onclick 同样受影响
原生 onclick 在 iOS Safari 和旧版 Android 浏览器中仍受点击延迟影响，不是它独有的问题——所有基于 click 事件的交互都一样。真正解决要靠：
- 在
<head>中加<meta name="viewport" content="width=device-width, initial-scale=1">（必需） - 使用
touchstart或现代方案如pointerdown - 引入
fastclick库（已过时）或直接用 CSStouch-action: manipulation
别指望换种写 onclick 的方式就能绕过这个底层行为。
内联 onclick 能用，但只适合极简原型或遗留系统补丁；真实项目里，函数作用域、调试性、可维护性这几个硬约束，很快就会让你切到 addEventListener 路线上。
