9.1 表单的基本事件
要让表单功能正常工作，咱们得搞清楚并且管理用户与表单元素互动时发生的事件。下面咱们会详细讲解 HTML 表单中最常用的事件，以及用 JavaScript 处理这些事件的方式，还会有一些例子。
在 HTML 中，表单可以触发各种事件，比如用户和输入框、按钮、复选框以及单选按钮互动时发生的事件。以下是表单的主要事件：
- submit — 表单提交事件
- reset — 表单重置事件
- focus — 元素获取焦点事件
- blur — 元素失去焦点事件
- change — 表单项值改变事件
- input — 表单项输入事件
- select — 表单项文本选取事件
9.2 submit 事件
submit事件 在表单提交时触发。一般是用户点击表单中的 "提交" 按钮时触发的。处理这个事件可以用来在数据传到服务器之前做校验，阻止提交包含错误的表单，也可以用来实现其他操作。
submit事件处理示例：
HTML
<form id="my-form" action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form>
JavaScript
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('请填写用户名。');
event.preventDefault(); // 阻止表单提交
} else {
alert(`用户名已收到: ${username}`);
event.preventDefault();
}
});
JavaScript
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('请填写用户名。');
event.preventDefault(); // 阻止表单提交
}
});
9.3 reset 事件
reset事件 在表单重置到初始状态时触发。一般用户点击 "重置" 按钮时触发。处理这个事件可以用来在重置表单时做一些额外操作，比如清空错误提示信息。
reset事件处理示例：
HTML
<div style="min-height: 220px">
<form id="my-form">
<label for="name">名字:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">邮箱:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">密码:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">重置</button>
</div>
</form>
<p id="log"></p>
</div>
HTML
<form id="my-form">
<label for="name">名字:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">邮箱:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">密码:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">重置</button>
</div>
</form>
<p id="log"></p>
JavaScript
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = '表单已被重置！';
});
JavaScript
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = '表单已被重置！';
});
9.4 focus 和 blur 事件
focus和blur事件 分别在表单项获得和失去焦点时触发。这些事件经常被用来优化用户体验，比如显示提示信息或错误提示。
focus事件处理示例：
``` ... (truncated due to limited display space) ... If you require the continuation or more sections to be converted, let me know and I will assist further!
GO TO FULL VERSION