正确做法是 btn.onclick = handleClick;，加括号会立即执行；需传参或多人协作时应优先用 addEventListener，避免内联 onclick 字符串写法。
直接给 onclick 赋函数引用会立即执行
很多人写 btn.onclick = handleClick();，结果页面一加载函数就跑了，点击时反而没反应。这是因为加了括号 ()，JS 立即调用并把返回值（通常是 undefined）赋给了 onclick，而不是绑定函数本身。
正确做法是不带括号：btn.onclick = handleClick;。这表示“把函数本身存进 onclick 属性”，等用户真点按钮时再触发。
- ✅ 正确：
btn.onclick = handleClick; - ❌ 错误：
btn.onclick = handleClick();（执行后赋值） - ⚠️ 注意：如果要传参，不能用这种写法，得换方案（见下一条）
需要传参？别用 onclick 赋值，改用 addEventListener
onclick 属性只能存一个函数，且无法自然支持参数传递；强行写 btn.onclick = function() { handleClick(id); }; 虽能工作，但可读性差、不利于解绑、也容易闭包陷阱（比如循环中绑定，所有监听器都用最后一个 id）。
推荐统一用 addEventListener，它天然支持闭包安全的参数捕获，也方便后续 removeEventListener。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
btn.addEventListener('click', () => handleClick(itemId)); - ✅ 更健壮（避免箭头函数重复创建）：先定义 handler，再绑定
const handler = () => handleClick(itemId); btn.addEventListener('click', handler); - ❌ 避免：
btn.onclick = function() { handleClick(itemId); };（尤其在 for 循环里）
onclick 字符串写法（内联）为什么危险？
HTML 里写 <button onclick="handleClick(123)"> 看似简单，但实际埋了几个坑：
- ❌ 只能在全局作用域找到
handleClick，模块化代码里基本失效（ES6 模块默认不挂 window） - ❌ 参数必须是字符串字面量或全局变量名，
onclick="handleClick(item.id)"会报错，因为item不在全局 - ❌ HTML 和 JS 逻辑混杂，调试困难，也不利于 CSP（内容安全策略）限制
- ✅ 唯一可接受场景：快速原型或静态 demo，且函数确定挂载在
window上
现代项目该用哪个？优先 addEventListener，慎用 onclick
onclick 属性是 DOM0 级事件模型，单监听、难管理、无事件流控制（捕获/冒泡阶段无法指定）。而 addEventListener 支持多监听、可选捕获、可移除、兼容性早已不是问题（IE9+）。
- ✅ 绑定多个点击行为：
btn.addEventListener('click', logClick); btn.addEventListener('click', trackEvent); - ✅ 解绑指定监听器：
btn.removeEventListener('click', handler);（注意：必须用同一函数引用） - ⚠️ 特殊情况才用
onclick：极简脚本、Legacy 系统维护、或需服务端渲染后立刻响应（但也要小心执行时机）
真正容易被忽略的是：绑定前是否已确保元素存在。动态插入的按钮，必须等 DOM 就绪后再绑定，否则 btn 是 null —— 这比选哪种绑定方式更常导致“点击没反应”。
