推荐使用 addEventListener 绑定事件，支持多监听、捕获/冒泡控制；onclick 写法易出错且耦合结构与行为；jQuery 的 on() 支持事件委托，适合动态元素。
直接在 HTML 标签里写 onclick
最直觉的方式，适合快速验证或静态页面小交互。但实际项目里它把结构和行为混在一起，后续改逻辑、加调试、做测试都麻烦。
常见错误是忘记加引号，或者把函数调用写成 onclick="handleClick()"（带括号会立即执行），正确写法是 onclick="handleClick" 或 onclick="handleClick(event)"。
- 只适用于简单场景，比如按钮弹个
alert - 不能访问闭包变量，作用域受限
- 多个相同事件要重复写，没法批量绑定
- IE8 及以下会把事件处理函数挂到全局，有污染风险
用 JavaScript 的 addEventListener 绑定
这是现代标准做法，推荐所有新项目统一用它。它支持同一元素绑定多个点击事件，也支持事件捕获/冒泡阶段控制。
容易踩的坑：绑定后没保存引用，导致无法 removeEventListener；或者用箭头函数导致 this 指向不对（虽然点击事件里 this 很少用，但习惯上还是用普通函数更稳）。
立即学习“前端免费学习笔记（深入）”；
- 绑定示例：
btn.addEventListener('click', handleClick) - 移除必须用相同函数引用：
btn.removeEventListener('click', handleClick) - 第三个参数设为
true表示捕获阶段触发，一般不用，除非特殊需求 - 动态插入的元素要等 DOM 加载完再绑定，否则
querySelector找不到
用 jQuery 的 click() 或 on() 方法
如果你项目里已经用了 jQuery，那 click() 最简单，on('click', ...) 更灵活，尤其适合代理事件（比如给未来才出现的按钮绑事件）。
注意 jQuery 3.0+ 已废弃 live() 和 delegate()，别搜旧教程往里套。另外，如果页面没引入 jQuery，硬写 $('btn').click(...) 会报 $ is not defined。
-
$('#myBtn').click(handleClick)—— 简单直接，但不支持事件委托 -
$(document).on('click', '#myBtn', handleClick)—— 推荐，能绑定尚未存在的元素 - jQuery 会自动处理 IE8–9 的兼容问题，但代价是额外加载 80KB+ JS
- 混合使用原生
addEventListener和 jQuery 绑定不会冲突，但调试时事件监听器列表里会看到两套
点击事件没触发？先查这三件事
不是代码写错，而是环境或细节卡住。90% 的“点不动”问题出在这几个地方。
- CSS 层叠导致元素被遮挡：
z-index太低，或父级有pointer-events: none - 元素没渲染出来就绑事件，比如在
DOMContentLoaded前执行document.getElementById - 移动端误触：iOS Safari 对
<div>默认不响应点击，得加cursor: pointer或touchstart事件来激活
事件机制本身不复杂，难的是它总藏在 DOM 状态、样式规则、加载时机这些“旁边”的地方。盯住控制台报错、检查元素是否可交互、确认绑定时机，比重写逻辑更管用。
