最简写法是直接在按钮上用onclick调用alert()，但会阻塞交互且不可定制；推荐用addEventListener分离HTML与JS，动态元素需事件委托；调试优先用console.log()，替代方案有confirm()或自定义DOM弹窗，避免prompt()及过度依赖第三方库。
点击按钮触发 alert() 最简写法
直接在按钮上用 onclick 属性调用原生 alert()，适合临时调试或极简场景。但注意：它会阻塞页面交互，且无法自定义样式。
- 写法：
<button onclick="alert('点我了！')">点我</button> - 不推荐在正式项目中这样写，因为 JS 逻辑和 HTML 结构耦合，后期难维护
-
alert()在移动端体验差，部分 iOS 版本会禁用或弹窗错位
用 addEventListener 绑定事件更稳妥
分离 HTML 和 JS，便于复用和测试。这是现代写法的起点，也是避免内联脚本的最佳实践。
- HTML 只留结构：
<button id="myBtn">点我</button> - JS 中获取并监听：
document.getElementById('myBtn').addEventListener('click', function() { alert('按钮被点了'); }); - 如果按钮是动态插入的，要用事件委托（监听父容器），否则绑定无效
- 别忘了检查 DOM 是否加载完成——把 JS 放在
</body>前，或用DOMContentLoaded事件包裹
替代 alert() 的轻量方案：用 console.log() 调试
开发阶段没必要真弹窗，console.log() 更快、不打断流程，还能输出变量值。
- 示例：
document.getElementById('myBtn').addEventListener('click', () => console.log('调试信息：按钮触发')); - 配合浏览器开发者工具的「Console」面板，比
alert()查看多参数、对象更清晰 - 上线前记得删掉或注释掉，避免用户看到控制台日志（虽然不影响运行）
想弹窗但不要原生 alert()？用 confirm() 或自定义 DOM
confirm() 提供「确定/取消」二选一，返回布尔值，适合简单确认场景；真要样式可控，就得自己建 <div> 弹层。
立即学习“前端免费学习笔记（深入）”；
-
confirm()写法：if (confirm('确定删除？')) { /* 执行删除 */ } - 自定义弹窗本质是操作 DOM：添加带遮罩层的
<div>，再用 CSS 控制显示/隐藏 - 别直接用
prompt()——现代浏览器普遍屏蔽它，尤其在非用户手势触发时（比如定时器里调用会失败） - 第三方库如 SweetAlert2 虽好，但一个提示框就引入几百 KB，小项目纯属杀鸡用牛刀
真正要注意的是：所有弹窗类交互都得考虑键盘可访问性（比如按 Esc 关闭）、焦点捕获、以及屏幕阅读器兼容。这些细节在简单示例里常被忽略，但上线前绕不开。
