从多个方面深入理解form.on()

Web页面中，常常需要响应某些事件，比如用户提交表单、鼠标点击等等。在JavaScript中，处理这些事件的方式是通过指定相关的event handler，然后在事件触发时调用。form.on()就是一个常见的event handler，用于处理表单元素的事件。在本文中，我们将深入探讨form.on的使用方法。

一、基本语法

form.on()是用于注册表单控件事件的函数，它的基本语法如下：

form.on(eventType, handler)

其中，eventType是要注册的事件类型，比如"submit"、"change"、"blur"等等；handler是一个将要被触发的Javascript函数，它接受一个event对象作为参数。下面是一个例子：

  

    <input type="text" name="username">
    <input type="password" name="password">
    登录

  

<script>
document.getElementById("myForm").on("submit", function(e) {
    e.preventDefault();
    console.log("表单被提交了！");
});
</script>

以上代码中，我们使用了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关键字指向触发事件的表单元素。这对于获取或设置表单元素的值非常有用。

四、实际使用

下面是一个实际应用案例，在用户在表单中输入文字时，动态展示用户的输入内容：

  

    <input type="text" name="username">
    提交

  


  


<script>
document.getElementById("myForm").on("input", function(e) {
    var val = this.elements["username"].value;
    document.getElementById("output").innerHTML = val;
});
</script>

以上代码中，我们使用了on方法注册了一个输入事件，当用户在表单输入框中输入文字时，将会动态展示在页面中。我们通过this.elements["username"].value获取到输入框的值，然后将其赋值给页面中的某个元素。

总结

form.on()是一个非常常见的处理表单事件的函数。在本文中，我们介绍了它的基本语法、常用的事件类型、handler函数以及实际应用案例。如果您在工作中需要处理表单事件，希望本文可以帮助您更好地理解和掌握form.on()的使用方法。