JavaScript - 表单事件
❮ 上一节
下一节 ❯
JavaScript - 表单事件
表单事件
JavaScript 中的表单事件是与 HTML 表单关联的事件。这些事件由用户与表单元素(例如文本字段、按钮、复选框等)交互时的操作触发。表单事件允许您执行 JavaScript 代码来响应这些操作，从而验证表单数据、执行表单提交或重置操作，并提升用户体验。
JavaScript 表单事件与文档对象模型(也称为 DOM)中的元素挂钩，默认情况下使用冒泡传播，即从底部(子元素)到顶部(父元素)。
常见表单事件列表
以下是一些常见的表单事件:
表单事件
描述
onsubmit
提交表单时触发。它通常用于在数据发送到服务器之前进行表单验证。
onreset
表单重置时触发，允许您在用户重置表单时执行操作。
onchange
表单元素(input、select、textarea)的值发生变化时触发。通常用于用户输入验证或动态更新。
oninput
输入元素的值发生变化时立即触发，允许实时处理用户输入。
onfocus
元素获得焦点时触发，例如用户点击或切换到输入字段时。用于提供反馈或提升用户体验。
onblur
当元素失去焦点时触发，例如用户点击输入字段外部或 Tab 键移开。用于因失去焦点而触发的验证或更新。
示例
示例:onchange 事件
以下示例说明了 onchange 事件的功能。此事件在用户更改下拉列表 (
示例:onsubmit 事件
以下示例重点介绍了 onsubmit 事件在表单提交时的功能。表单包含用户名字段和密码字段;调用validateForm函数时，必须填写这两个字段才能成功验证。通过此验证后，提交表单将触发显示确认消息。
示例:onreset 事件
在本演示中，我们观察 onreset 事件的实际作用:该事件在用户点击表单中的"重置"按钮时触发。resetForm 函数一旦被调用，就会清除用户填写的表单内容，然后显示一个警告框，确认该表单重置成功。
示例:oninput 事件
此示例演示了 oninput 事件:当用户在搜索输入字段中输入内容时，这确实是一个实时操作!handleInput 函数会触发;它会将每个当前搜索输入直接记录到屏幕上。
示例:onfocus 和 onblur 事件
本例中，onfocus 和 onblur 事件合并。用户聚焦于输入字段会触发对 handleFocus 函数的调用，该函数随后会在控制台中记录一条消息。相反，当用户点击输入字段外部或 Tab 键离开输入字段时，此操作会触发另一个名为 handleBlur 的函数的执行，该函数随后会在同一控制台日志中记录另一条消息。
❮ 上一节
下一节 ❯