可通过内联onclick属性或addEventListener方法为按钮绑定点击事件，推荐使用后者以实现结构与行为分离，利于维护。
在HTML中为按钮添加点击事件，通常使用JavaScript来绑定交互行为。可以通过内联方式或分离式脚本实现事件监听，推荐使用后者以保持结构与行为分离。
1. 内联onclick属性（简单直接）
在HTML标签中直接使用onclick属性是最基础的方法。
示例：
<button onclick="alert('按钮被点击了！')">点击我</button>也可以调用已定义的函数：
立即学习“Java免费学习笔记（深入）”；
<script>function handleClick() {
alert("执行自定义函数");
}
</script>
<button onclick="handleClick()">调用函数</button>
2. 使用addEventListener绑定事件（推荐方式）
将JavaScript与HTML分离，有利于维护和扩展。通过document.getElementById获取按钮元素，再使用addEventListener绑定点击事件。
示例：
<button id="myBtn">点击触发</button><script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("按钮被点击了！");
});
</script>
也可以绑定命名函数：
<script>function showMessage() {
console.log("按钮已点击");
}
document.getElementById("myBtn").addEventListener("click", showMessage);
</script>
3. 为多个按钮批量绑定事件
如果页面中有多个按钮需要相同处理逻辑，可以使用getElementsByClassName或querySelectorAll获取元素集合，然后循环绑定。
示例：
<button class="action-btn">按钮1</button><button class="action-btn">按钮2</button>
<button class="action-btn">按钮3</button>
<script>
const buttons = document.querySelectorAll(".action-btn");
buttons.forEach(btn => {
btn.addEventListener("click", function() {
alert("你点击了：" + this.textContent);
});
});
</script> 小提示： 使用addEventListener的好处是能绑定多个事件处理函数，不会覆盖已有事件，且支持更灵活的控制（如事件冒泡、捕获等）。 基本上就这些常用方法，按项目需求选择合适的方式即可。
