第一百四十三章 表单事件

焦点事件，也算是表单相关事件，因为就表单里用的最多呀。这一章我们再讲两个表单相关的事件。

一个 change，就是改变，在表单的输入项发生改变的时候被触发。这个用途很多，因为通过这个事件，我们就可以随着用户的输入不断进行响应了，想想真是一种十分美好的使用体验呢~但是很可惜，对于像单选框和复选框这样的元素，确实可以达到上述效果，但是对于文本输入框，或者多行文本框，在用户输入的时候并不会触发这一事件。只有当输入框失去焦点的时候，才会触发。这样并不能够做到实时的响应，所以对于输入的实时响应，我一般使用 keydown 事件来监控。

该事件也可以使用代码进行触发，但是实际上并没有改变什么，只是假装改变了，喊一声，然后引发连锁的其他事件。

还有一个非常重要的事件，就是提交了，submit。当表单被提交的时候，会触发这一事件。

需要注意，在一个表单里，一个按钮的默认动作就是提交这个表单。而普通表单一旦被提交，会触发一个跳转的动作，就像我们点击了一个链接一样。这会使我们离开当前页面或者刷新当前页面，那已经填写的所有内容都会消失，正在运行的所有（网页内的）代码都会被停止。

这是一个非常严重的问题，因为许多时候我们并不希望这样去做。这时候我们可以采取下列几种措施：

• 如果不是用来提交表单的按钮，记得把它的类型设置为 type="button"；
• 干脆不使用表单。因为有时候，我们仅仅是为了在当前页面中获得一些输入和交互，而并不需要将它进行提交。这时候不使用表单域，可以减少好多麻烦。只是不够规范。
• submit 事件中执行 event.preventDefault();，表示阻止该事件中默认操作的发生。但是请注意执行的时机尽量靠前，因为某些原因（不展开了），也许在这一条还没有被执行到的时候，提交操作就已经开始了，然后当然也就阻止不住了。

这个事件也可以使用代码进行触发，一旦触发，表单就真的被提交了（如果你没有阻止默认事件的发生的话）。

我们可以在提交事件中进行表单数据的验证，看用户输入的是否符合我们的预期，然后再决定是否要进行表单提交的操作，或者向用户提示输入不合规范的位置。