三、（JS）JS中常见的表单事件
一、onfocus、onblur事件
这个很容易理解，就不解释啦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
var inputEl = document.querySelector("input")
// 1. 获取焦点和失去焦点.
inputEl.onfocus = function () {
console.log("input获取到了焦点");
}
inputEl.onblur = function () {
console.log("input失去了焦点");
}
</script>
</body>
</html>二、oninput、onchange事件
（1）输入的过程是input事件，内容确定发生改变（离开）是change事件
我们先来个案例看下各自是什么表现。我们先来个输入框，在输入框里面输入内容是什么反应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
var inputEl = document.querySelector("input")
// 1. 获取焦点和失去焦点.
// inputEl.onfocus = function () {
// console.log("input获取到了焦点");
// }
// inputEl.onblur = function () {
// console.log("input失去了焦点");
// }
// 2. 内容发生改变/输入内容
inputEl.oninput = function () {
console.log("input事件正在输入内容", inputEl.value);
}
inputEl.onchange = function () {
console.log("change事件内容发生了改变", inputEl.value);
}
</script>
</body>
</html>表现：我们一直输入a，页面输出结果如下。input事件随着我们输入内容（没有失去焦点），每次都会触发一次事件。但是不会触发onchange事件。
这个时候，我们输入完内容后从输入框中失去焦点看下。
表现：这个时候触发了onchange事件，所以oninput事件和onchange事件之间的区别是否很明显？
得出结论：输入的过程是input事件，内容确定发生改变（离开）是change事件
三、onreset、 onsubmit事件
（1）重置的事件是发生在form身上的。
举个例，我写一个form表单，里面有2个输入框一个是input输入框，一个是textarea，并且有2个按钮一个是重置按钮，一个是提交按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input type="text"> -->
<form action="">
<input type="text">
<textarea name="" id=""></textarea>
<button type="reset">重置</button>
<button type="submit">提交</button>
</form>
<script>
var inputEl = document.querySelector("input")
// 1. 获取焦点和失去焦点.
// inputEl.onfocus = function () {
// console.log("input获取到了焦点");
// }
// inputEl.onblur = function () {
// console.log("input失去了焦点");
// }
// 2. 内容发生改变/输入内容
// 输入的过程是input事件，
// 内容确定发生改变（离开）是change事件
// inputEl.oninput = function () {
// console.log("input事件正在输入内容", inputEl.value);
// }
// inputEl.onchange = function () {
// console.log("change事件内容发生了改变", inputEl.value);
// }
</script>
</body>
</html>此时我在页面上2个输入框里分别输入一些内容
然后点击重置看下变化。
得出结论：里面button重置按钮，重置的事件是发生在form身上的。
所以我们想要监听重置事件，得监听form元素。
（2）onreset事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input type="text"> -->
<form action="/abc">
<input type="text">
<textarea name="" id=""></textarea>
<button type="reset">重置</button>
<button type="submit">提交</button>
</form>
<script>
var inputEl = document.querySelector("input")
// 1. 获取焦点和失去焦点.
// inputEl.onfocus = function () {
// console.log("input获取到了焦点");
// }
// inputEl.onblur = function () {
// console.log("input失去了焦点");
// }
// 2. 内容发生改变/输入内容
// 输入的过程是input事件，
// 内容确定发生改变（离开）是change事件
// inputEl.oninput = function () {
// console.log("input事件正在输入内容", inputEl.value);
// }
// inputEl.onchange = function () {
// console.log("change事件内容发生了改变", inputEl.value);
// }
// 3. 监听重置和提交
var formEl = document.querySelector("form")
formEl.onreset = function (event) {
console.log("发生了重置事件");
// 阻止默认行为
event.preventDefault()
}
</script>
</body>
</html>（3）onsubmit事件
通常开发中，我们需要阻止默认提交，手动来提交（axios库提交，后续会讲）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input type="text"> -->
<form action="/abc">
<input type="text">
<textarea name="" id=""></textarea>
<button type="reset">重置</button>
<button type="submit">提交</button>
</form>
<script>
var inputEl = document.querySelector("input")
// 1. 获取焦点和失去焦点.
// inputEl.onfocus = function () {
// console.log("input获取到了焦点");
// }
// inputEl.onblur = function () {
// console.log("input失去了焦点");
// }
// 2. 内容发生改变/输入内容
// 输入的过程是input事件，
// 内容确定发生改变（离开）是change事件
// inputEl.oninput = function () {
// console.log("input事件正在输入内容", inputEl.value);
// }
// inputEl.onchange = function () {
// console.log("change事件内容发生了改变", inputEl.value);
// }
// 3. 监听重置和提交
var formEl = document.querySelector("form")
formEl.onreset = function (event) {
console.log("发生了重置事件");
// 阻止默认行为
event.preventDefault()
}
formEl.onsubmit = function () {
console.log("发生了提交时间");
// axios库提交
event.preventDefault()
}
</script>
</body>
</html>