Web页面中，常常需要响应某些事件，比如用户提交表单、鼠标点击等等。在JavaScript中，处理这些事件的方式是通过指定相关的event handler，然后在事件触发时调用。form.on()就是一个常见的event handler，用于处理表单元素的事件。在本文中，我们将深入探讨form.on的使用方法。
一、基本语法
form.on()是用于注册表单控件事件的函数，它的基本语法如下：
form.on(eventType, handler)
其中，eventType是要注册的事件类型，比如”submit”、”change”、”blur”等等；handler是一个将要被触发的Javascript函数，它接受一个event对象作为参数。下面是一个例子：
document.getElementById("myForm").on("submit", function(e) {
e.preventDefault();
console.log("表单被提交了！");
});
以上代码中，我们使用了on方法注册了一个表单提交事件，在事件被触发时，控制台将输出”表单被提交了！”。注意，我们调用了event.preventDefault()方法，用来阻止表单默认的提交行为。
二、事件类型
form.on()支持多种事件类型，下面我们将介绍其中一些常见的类型。
1. submit
当表单被提交时触发。在该事件处理函数中，可以进行表单数据的验证、提交等处理。
2. change
当表单元素的值被改变时触发。在该事件处理函数中，可以进行表单数据的实时校验。
3. blur
当表单元素失去焦点时触发。在该事件处理函数中，可以进行表单数据的最终校验。
三、handler函数
form.on()所注册的事件处理函数是一个Javascript函数，它接收一个event对象作为参数。在事件触发时，浏览器会将event对象传递给该函数，并且在函数内部可以访问该对象的属性和方法。
1. 事件对象
下面是一些常用的event属性和方法：
event.target：触发事件的表单元素。 event.preventDefault()：阻止表单默认提交行为。 event.stopPropagation()：防止事件冒泡至父级元素。 event.preventDefault()：阻止默认的事件行为。 event.stopImmediatePropagation()：阻止事件的传递，不再执行下一个绑定的响应函数。
2. this关键字
在event handler函数中，this关键字指向触发事件的表单元素。这对于获取或设置表单元素的值非常有用。
四、实际使用
下面是一个实际应用案例，在用户在表单中输入文字时，动态展示用户的输入内容：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182387.html
微信扫一扫 
支付宝扫一扫 