button 元素不必须但强烈建议显式设 type="button"，否则在 form 内默认为 submit 导致意外提交；addEventListener 比 onclick 更可靠；多按钮共用函数宜用 data-action 区分；视觉反馈失效主因是 CSS 状态伪类缺失或优先级不足。
button 元素必须显式设 type="button" 吗？
不是必须，但强烈建议。默认情况下，button 在 form 内会当作 type="submit" 处理——点一下就刷新页面或提交空表单，这是最常见的“点了没反应却跳走了”的根源。
以下情况必须手动指定：
- 按钮不在 form 里：仍建议写 type="button"，避免未来挪动 DOM 时意外引入表单上下文
- 按钮在 form 里但不负责提交：不加 type 就是隐患
- 用 addEventListener 绑定后仍跳转：大概率漏写了 type="button"，而不是事件没绑上
onclick 属性和 addEventListener 哪个更可靠？
addEventListener 更可靠，尤其当按钮需要多个响应逻辑、或后续要移除监听时。onclick 是属性赋值，同一元素只能有一个，后赋的会覆盖前一个。
常见误用场景：
- 动态插入按钮后直接写 onclick="handle()"：如果 handle 函数还没定义，控制台报 ReferenceError
- 多个脚本都试图用 onclick 绑定不同行为：只有最后一个生效
- 按钮被 JS 重渲染（如 Vue/React 的 v-if 或 useState 切换）：内联 onclick 不会自动重挂载，而 addEventListener 可配合生命周期或事件委托复用
怎么让多个按钮共用一个处理函数又区分操作？
靠 data- 属性传参，比写一堆匿名函数或重复绑定干净得多。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操要点：
- HTML 中给每个按钮加唯一 data-action，比如 data-action="delete"、data-action="edit"
- 事件回调里用 event.target.dataset.action 读取值，注意是小驼峰转连字符（data-user-id → dataset.userId）
- 避免在 dataset 里塞 JSON 字符串，容易引号嵌套出错；真要传结构化数据，改用 data-id="123" + 查表映射更稳
- 如果按钮是动态生成的（如列表渲染），别对每个都 addEventListener，改用事件委托：document.querySelector('.btn-group').addEventListener('click', handler)，再判断 event.target.matches('[data-action]')
按钮点击后视觉反馈为什么经常失效？
不是 JS 问题，而是 CSS 优先级或状态伪类没覆盖到。浏览器默认的 :active 样式极弱，且只在鼠标按下瞬间生效，手指松开就没了。
立即学习“前端免费学习笔记（深入）”；
真正可用的方案：
- 必须用 :active + :focus 双保险，否则键盘用户按 Space 键没反馈
- 禁用状态用 disabled 属性，别只靠 opacity: 0.5；否则屏幕阅读器读不到，且仍能触发 click 事件
- 移动端要加 touch-action: manipulation，否则 iOS Safari 点击有 300ms 延迟，看起来像“没点上”
- 如果用了 pointer-events: none 来禁用，记得同时加 cursor: not-allowed，不然光标还是手型，误导用户
实际开发中，最常被跳过的不是 JS 逻辑，而是 type 属性、dataset 命名规范、以及 disabled 和视觉样式的同步——这三处出问题，调试起来比逻辑错误还费时间。
