最简写法是直接在标签中使用onclick属性，如测试按钮；推荐方式是通过addeventlistener绑定事件，确保dom加载完成后再执行。
HTML 中 <button></button> 点击触发 JS 自定义逻辑的最简写法
直接给 <button></button> 绑定 onclick 行内事件是最快速的启动方式，适合原型验证或简单交互：
-
onclick值里写 JS 表达式或函数调用，注意引号嵌套：单引号包裹整个属性值，内部用双引号；或反过来 - 不要在
onclick里写多行语句，避免转义和可读性问题；复杂逻辑务必抽到外部函数 - 行内写法无法复用、难调试、破坏 HTML/JS 关注点分离，仅限临时调试或极简场景
示例：
<button onclick="alert('点击生效'); console.log('已记录')">测试按钮</button>
用 addEventListener 绑定点击事件（推荐主流做法）
这是现代前端的标准实践，解耦 HTML 结构与行为逻辑，支持多次绑定、动态控制、事件委托等：
- 必须确保 DOM 加载完成后再执行绑定，否则
document.getElementById返回null - 推荐用
DOMContentLoaded事件，而不是把 script 放在 body 底部（后者依赖加载顺序，不严谨） - 如果按钮是后续动态插入的（如 AJAX 渲染），要用事件委托：监听父容器，用
event.target.matches('.my-btn')判断来源
示例：
document.addEventListener('DOMContentLoaded', () => {<br> const btn = document.getElementById('submit-btn');<br> if (btn) {<br> btn.addEventListener('click', () => {<br> console.log('自定义动作执行中...');<br> // 这里放你的业务逻辑<br> });<br> }<br>});
避免 <button type="submit"></button> 触发表单默认提交
很多新手误用 type="submit" 却没配 <form></form>，或配了但只想执行 JS 不想跳转/刷新页面：
- 如果不希望提交表单，要么把
type改成"button"（最安全），要么在事件回调里调用event.preventDefault() - 若保留
type="submit"又没阻止默认行为，页面会刷新或跳转，JS 逻辑可能执行一半就中断 - 注意：Vue/React 等框架中，
@click.prevent或onClick={e => { e.preventDefault(); ... }}是等效写法
示例（原生 JS）：
btn.addEventListener('click', (e) => {<br> e.preventDefault(); // 关键：阻止表单默认提交<br> doCustomAction();<br>});
为什么不用 <input type="button">？
虽然也能点击触发，但相比 <button></button> 有明显短板：
-
<input>无法包裹 HTML 内容（比如图标 + 文字），<button></button>可以：<button><i class="icon"></i> 提交</button> -
<button></button>在表单中默认参与tabindex和键盘操作（空格/回车触发），<input type="button">兼容性略弱 - 部分旧版 IE 对
<input type="button">的样式控制更受限，比如垂直居中、内边距渲染
结论：除非遗留系统强制要求，否则一律优先用 <button></button> 标签。
真正容易被忽略的是事件绑定时机与表单类型的隐式耦合——DOM 没就绪就查元素，或没意识到 type="submit" 会自带跳转行为。这两个点卡住的人，往往反复刷新页面却看不出 JS 执行痕迹。
