表单事件
JavaScript 中的表单事件是与 HTML 表单关联的事件。这些事件由用户在与表单元素（如文本字段、按钮、复选框等）交互时触发。表单事件允许您执行 JavaScript 代码以响应这些操作，从而使您能够验证表单数据、在表单提交或重置时执行操作，并增强用户体验。
JavaScript 表单事件被挂接到文档对象模型（也称为 DOM）中的元素上，默认情况下使用冒泡传播，即从底部（子）到顶部（父）。
常见表单事件列表
以下是一些常见的表单事件：
| 表单事件 | 描述 |
|---|---|
| onsubmit | 在提交表单时触发。它通常用于在将数据发送到服务器之前进行表单验证。 |
| onreset | 在重置表单时触发，允许您在用户重置表单时执行操作。 |
| onchange | 当表单元素（input、select、textarea）的值发生更改时触发。通常用于用户输入验证或动态更新。 |
| oninput | 当 input 元素的值发生变化时立即触发，允许实时处理用户输入。 |
| onfocus | 当元素获得焦点时触发，例如当用户单击或 Tab 键进入输入字段时。有助于提供反馈或增强用户体验。 |
| onblur | 当元素失去焦点时触发，例如当用户在输入字段外部或 Tab 键外单击时。对于因焦点丢失而触发的验证或更新很有用。 |
例子
示例：onchange 事件
下面提供的实例说明了 onchange 事件的功能。当用户更改下拉 （<select>） 选项选择时，此事件将激活。函数 handleChange 动态修改 <h2> 元素以显示新选择的国家/地区;从而随着用户偏好的发展提供即时反馈。
<!DOCTYPE html>
<html>
<body>
<label for="country">Select a country:</label>
<select id="country" onchange="handleChange()">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="India">India</option>
</select>
<p id="txt"></p>
<script>
function handleChange() {
// 当下拉选择更改时执行操作
var selectedCountry = document.getElementById('country').value;
document.getElementById("txt").textContent=
"Selected country: "+selectedCountry;
}
</script>
</body>
</html>
示例：onsubmit 事件
以下示例突出显示了表单提交时 onsubmit 事件的功能。该表单具有 username 字段和 password 字段;在调用 validateForm 函数时，必须填写这两个选项才能成功验证。通过此验证后，提交表单将触发确认消息的显示。
<!DOCTYPE html>
<html>
<body>
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br/>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 执行验证
if (username === "" || password === "") {
alert("Please fill in all fields");
return false; // 阻止表单提交
}
alert("Form submitted! Username is:"+username+",Password is:"+password);
return true; // 允许表单提交
}
</script>
</body>
</html>
示例：onreset 事件
在本演示中，我们观察了 onreset 事件的运行情况：当用户单击表单中的 “Reset” 按钮时，它会触发该事件。调用 resetForm 函数后，将清除用户填写的表单内容，然后显示警报以确认已成功重置所述表单。
<!DOCTYPE html>
<html>
<body>
<form onreset="resetForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="reset" value="Reset">
</form>
<script>
function resetForm() {
// 重置表单时执行操作
alert("Form has been reset!");
}
</script>
</body>
</html>
示例：oninput 事件
此示例说明了 oninput 事件：当用户在搜索输入字段中键入实时操作时，确实如此！handleInput 函数触发;它将每个当前搜索输入直接记录到屏幕上。
<!DOCTYPE html>
<html>
<body>
<label for="search">Search:</label>
<input type="text" id="search" oninput="handleInput()">
<div id="message" style=" margin-top: 10px; font-weight: lighter;border: 1px solid #ddd;padding: 10px; background-color: #f9f9f9; border-radius: 5px; font-family: 'Arial', sans-serif; font-size: 14px; color: #333; width: 30%;"></div>
<script>
var messageElement = document.getElementById('message');
function handleInput() {
// 根据用户键入的内容执行操作
var searchInput = document.getElementById('search').value;
messageElement.innerHTML+="Search input: " + searchInput+'<br>';
}
</script>
</body>
</html>
示例：onfocus 和 onblur 事件
在此示例中，onfocus 和 onblur 事件合并。用户对 input 字段的关注会触发对 handleFocus 函数的调用，然后该函数会将消息记录到控制台中。相反，当单击所述输入字段之外或远离所述输入字段时，此操作会触发另一个名为 handleBlur 的函数的执行，该函数随后在同一控制台日志中记录替代消息。
<!DOCTYPE html>
<html>
<body>
<label for="name">Name:</label>
<input type="text" id="name" onfocus="handleFocus()" onblur="handleBlur()">
<p id= "output"></p>
<script>
const output = document.getElementById('output');
function handleFocus() {
// 当输入获得焦点时执行操作
output.innerHTML += "Input has focus" + "<br>";
}
function handleBlur() {
// 当输入失去焦点时执行操作
output.innerHTML += "Input lost focus" + "<br>";
}
</script>
</body>
</html>
