使用 onclick 属性可快速绑定 事件 ，但逻辑与结构耦合，不利于维护；2. 推荐通过 id 结合 addEventListener 方法分离html 与js，提升可维护性；3. 可利用类名和 querySelectorAll 批量绑定事件，实现 代码复用，现代开发应优先采用 addEventListener 以保持解耦。
在 HTML 中插入按钮并绑定 javaScript 事件，是实现网页交互的基础操作。只需要使用<button> 标签创建按钮，再通过内联方式或 dom 操作绑定点击等事件即可。
1. 使用内联方式直接绑定事件
最简单的方法是在 <button> 标签中使用 onclick 属性直接指定要执行的 javascript 代码。
示例：
<button onclick=”alert(‘ 按钮被点击了！’)”> 点击我 </button>
这种方式适合简单功能，但不推荐用于复杂项目，因为逻辑与结构耦合度高，不利于维护。
立即学习“Java 免费学习笔记（深入）”；
2. 使用 ID 和 addEventListener 绑定事件
更推荐的方式是为按钮设置 id，然后在 JavaScript 中通过document.getElementById() 获取元素，并使用 addEventListener 绑定事件。
示例：
<button id=”myButton”> 点我触发事件 </button>
<script>
document.getElementById(“myButton”).addEventListener(“click”, function() {
alert(“ 按钮被点击了！”);
});
</script>
这种方法将 HTML 与 JavaScript 分离，结构清晰，便于扩展和调试。
3. 绑定多个事件或复用函数
如果需要绑定多个按钮到同一个处理函数，可以使用 querySelectorAll 或类名批量操作。
示例：
<button class=”action-btn”> 按钮 1 </button>
<button class=”action-btn”> 按钮 2 </button>
<script>
document.querySelectorAll(“.action-btn”).foreach(function(button) {
button.addEventListener(“click”, function() {
console.log(“ 某个按钮被点击：” + this.textContent);
});
});
</script>
这样可以统一管理多个按钮的行为，减少重复代码。
基本上就这些。使用 addEventListener 是现代 前端 开发的标准做法，灵活且易于维护。注意避免内联事件绑定过多，保持代码解耦更利于后期升级。
