JavaScript表单事件
焦点处理
焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。
获取焦点：focus
当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。
示例：输入框被点击时触发，会在文本框后面提示“请输入11位手机号！！！”
<form action="">PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11"><span></span></form><script>let inpEle = document.querySelector("input[type='text']");let spanEle = document.querySelector("span");//焦点事件(输入框被点击时触发)inpEle.addEventListener("focus", e => {spanEle.innerHTML = `请输入11位手机号！！！`;});</script>
失去焦点：blur
blur事件类型表示在元素失去焦点时响应，它与focus事件类型是对应的，主要作用于表单元素和超链接对象
示例：输入框失去点击焦点时，会在文本框后面提示“请输入11位手机号！！！”，并且输入内容是非数字时，会提示“请输入数字！！!”
<form action="">PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11"><span></span></form>inpEle.addEventListener("blur", e => {let event = e || window.event;let inputInfo = event.target.value;if(!isNaN(inputInfo)) {spanEle.innerHTML = `请输入11位手机号！！！`;}else {spanEle.innerHTML = `请输入数字！！！`;spanEle.style.color = `red`;}console.log(inputInfo);});
输入事件input
inout事件类型在输入框有东西输入时响应，主要作用于表单元素输入的内容和设定的值相比较，可以和正则表达式一起连用来判断输入内容是否合法
示例：输入框输入手机号码，直到输入内容和正则表达式的值相等还时，便提示“输入正确！！！”
form action="">PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11"><span></span></form>inpEle.addEventListener("input", e => {let event = e || window.event;let inputInfo = event.target.value;let re = /^[1][3-9][0-9]{9}$/g;if (re.test(inputInfo)) {spanEle.innerHTML = `输入正确`;spanEle.style.color = `green`;} else {spanEle.innerHTML = `不正确！！！`;spanEle.style.color = `red`;}});
变化事件change
change事件类型在输入框输入的值变化时响应，当上一次输入的值和当前输入的值不同时便会触发，会多次触发事件
示例：输入框输入值前后两次不同的时候，都会提示“跟上次不一样！！！”
form action="">PhoneNumber:<input type="text" placeholder="input your phone number" maxlength="11"><span></span></form>inpEle.addEventListener("change", e => {spanEle.innerHTML = "跟上次不一样！！！";});
