最简写法是内联 onclick="alert('操作成功！')"，但推荐用 addEventListener 分离 HTML 与 JS；input[type=button] 不如 button 语义化且可访问性差；alert 仅限浏览器环境。
点击按钮触发 alert() 的最简写法
直接在 <button> 标签里用 onclick 写内联事件，是最快速生效的方式。但要注意：HTML 属性值必须用双引号包裹，alert() 里的字符串也得用单引号（或转义），否则会解析出错。
<button onclick="alert('操作成功！')">点我</button>- 如果字符串里含单引号，比如
John's file，就改用双引号：alert("John's file") - 不推荐在
onclick里写多行逻辑或复杂表达式，可读性和调试性都很差
用 addEventListener() 绑定更可控
把 HTML 和 JS 拆开，是更健壮的做法。尤其当按钮有 ID 或 class、或者需要复用逻辑时，这种方式能避免内联脚本污染结构。
- 先给按钮加
id="alertBtn"，再用 JS 获取并绑定：document.getElementById('alertBtn').addEventListener('click', () => { alert('已确认'); }); - 如果页面加载时 DOM 还没就绪，
getElementById会返回null，建议把 JS 放在</body>前，或包装在DOMContentLoaded里 - 一个按钮可以绑定多个
addEventListener，互不影响；而内联onclick只能写一个，后赋值会覆盖前一个
为什么 <input type="button"> 也能用但不推荐
老项目里偶尔能看到 <input type="button" value="点我" onclick="alert(1)">，它确实能触发 alert()，但语义和可维护性不如 <button>。
-
<button>支持嵌套 HTML（比如图标<svg>），<input>只能显示纯文本 - 无障碍访问（a11y）方面，
<button>默认有role="button"和键盘焦点支持，<input type="button">需额外补属性 - 样式控制更灵活：
<button>可以设display: flex、伪元素等，<input>在某些浏览器里盒模型异常
常见报错：Uncaught ReferenceError: alert is not defined
这个错误基本只发生在非浏览器环境，比如你在 Node.js 里运行了带 alert() 的脚本，或误把前端代码粘贴进了服务端文件。
-
alert()是浏览器专属的全局函数，Node.js、Electron 主进程、Web Worker 里都不可用 - Vue/React 等框架组件中写
alert()没问题，前提是它最终运行在浏览器渲染进程里 - 若需跨环境提示，应改用
console.log()（开发时）或自定义弹窗组件（生产时）
alert() 很少用于正式交互——阻塞主线程、无法定制样式、移动端体验差。真要提示用户，优先考虑 toast 或模态框；只有调试、内部工具或极简原型时，才用它快速验证逻辑通路。 
