在HTML页面开发中，按钮是实现用户交互的重要组件，最常见的按钮创建方式有两种，分别是使用<button>标签和<input>标签的按钮类型，而给按钮绑定事件也有多种成熟方案。
一、HTML按钮的创建方法
1. 使用button标签创建按钮
<button>标签是HTML原生的按钮标签，内容可以是文本、图标甚至其他HTML元素，默认类型是submit，在表单中会触发提交行为，单独使用时建议显式指定type属性。
<!-- 普通按钮，不触发表单提交 --> <button type="button" id="btn1">点击我</button> <!-- 提交按钮，在表单中会提交表单数据 --> <button type="submit">提交表单</button> <!-- 重置按钮，在表单中会重置表单内容 --> <button type="reset">重置表单</button>
2. 使用input标签创建按钮
<input>标签通过type属性设置为button、submit、reset也可以创建按钮，这类按钮的内容只能通过value属性定义，无法放置其他HTML元素。
<!-- 普通按钮 --> <input type="button" id="btn2" value="input按钮"> <!-- 提交按钮 --> <input type="submit" value="提交"> <!-- 重置按钮 --> <input type="reset" value="重置">
二、按钮事件绑定方法
1. 行内事件绑定
直接在按钮标签上通过事件属性绑定处理函数，是最简单的绑定方式，但是不符合结构与行为分离的原则，不适合复杂项目使用。
<button type="button" onclick="handleClick()">行内绑定按钮</button>
<script>
function handleClick() {
alert("行内绑定的点击事件触发了");
}
</script>
2. DOM属性绑定
先通过DOM方法获取按钮元素，再给元素的onclick属性赋值处理函数，这种方式会覆盖之前绑定的同名事件，只保留最后一次绑定的逻辑。
// 获取button标签创建的按钮
const btn1 = document.getElementById("btn1");
// 绑定点击事件
btn1.onclick = function() {
alert("DOM属性绑定的点击事件触发了");
};
// 获取input标签创建的按钮
const btn2 = document.getElementById("btn2");
btn2.onclick = function() {
alert("input按钮的点击事件触发了");
};
3. addEventListener监听绑定
使用addEventListener方法绑定事件，支持给同一个按钮绑定多个同类型事件，所有绑定的逻辑都会按顺序执行，是目前推荐的事件绑定方式。
const btn1 = document.getElementById("btn1");
// 第一个点击事件
btn1.addEventListener("click", function() {
alert("第一个监听事件触发");
});
// 第二个点击事件，不会覆盖第一个
btn1.addEventListener("click", function() {
console.log("第二个监听事件触发，可在控制台查看");
});
三、两种按钮的使用场景对比
我们可以通过下表快速了解两种按钮的差异，方便在实际开发中选择合适的创建方式：
| 对比项 | button标签按钮 | input标签按钮 |
|---|---|---|
| 内容支持 | 支持文本、图标、其他HTML元素 | 仅支持通过value属性设置文本 |
| 默认行为 | type默认是submit，表单中会提交 | type默认是text，需显式设置button类型 |
| 样式自定义 | 更容易自定义内部样式 | 样式自定义相对受限 |
| 适用场景 | 需要复杂内容、非表单提交场景 | 简单文本按钮、表单内提交重置场景 |
四、注意事项
- 在非表单场景使用
<button>标签时，一定要设置type="button"，避免默认提交行为导致页面刷新。 - 事件绑定时的函数如果不需要复用，可以使用匿名函数，如果需要复用则定义具名函数。
- 如果按钮是动态生成的，建议使用事件委托的方式绑定事件，避免重复绑定带来的性能问题。
HTML_buttoninput_button事件绑定onclickaddEventListener修改时间：2026-06-13 10:42:15