表单事件：(简单列出一些具有代表性的事件)
属性 描述
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( <input>，<******>，<select>，和<textarea>)
onfocus 元素获取焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onsearch 用户向搜索域输入文本时触发 ( <input="search"> )
onselect 用户选取文本时触发 ( <input> 和 <textarea> )
onsubmit 表单提交时触发
接着搭建有说服力的HTML来帮助理解：
<form action="嵌入到HTML.html" id="from1">
姓名： <input type="text" id="name">
<br>
年龄： <input type="text" id="age">
<br>
性别：<select id="sex">
<option value="true">男</option>
<option value="false">女</option>
</select>
<br>
<button type="submit">提交</button>
</form>
浏览器效果图：
接下来就是JS部分了：
1.首先获取下表单的id
var inputName = document.getElementById('name');
var inputAge = document.getElementById('age');
var selectSex = document.getElementById('sex');
var from1 = document.getElementById('from1');
2.介绍事件： (主要是onfocus onblur onchange onsubmit这四个事件)
//onfocus onblur
inputName.onfocus = function () {
console.log("姓名文本框获得了焦点");
}
inputName.onblur = function () {
console.log("姓名文本框失去了焦点");
}
//onchange
selectSex.onchange = function () {
console.log("selectSex的值发生了改变");
}
inputAge.onchange = function () {
console.log("inputAge的值发生了改变");
}
//onsubmit
from1.onsubmit = function () {
console.log("from1表单提交");
return false;//可以阻止表单提交，页面跳转
}