我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面，模拟客户输入相关事件的触发流程：
首先还是先触发了鼠标按下事件，然后触发了焦点，接着鼠标抬起，触发click事件。到了这里客户开始输入信息了，keydown，keyup，keydown，keyup的循环，因为用的输入法，所以字还没打出来的时候（敲回车的时候）不会触发input的，当input框里面的内容被改变的时候，则会触发input事件。一直这样循环到鼠标焦点离开触发blur。这就是一整个循环，注意：input事件属于html5事件。input=text不会触发change事件。
下面附上案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="input">
</body>
<script>
document.getElementById("input").addEventListener("focus",function () {
console.log("focus");
});
document.getElementById("input").addEventListener("mousedown",function () {
console.log("mousedown");
});
document.getElementById("input").addEventListener("mouseup",function () {
console.log("mouseup");
});
document.getElementById("input").addEventListener("input",function () {
console.log("input");
});
document.getElementById("input").addEventListener("change",function () {
console.log("change");
});
document.getElementById("input").addEventListener("blur",function () {
console.log("blur");
});
document.getElementById("input").addEventListener("click",function () {
console.log("click");
});
document.getElementById("input").addEventListener("keydown",function () {
console.log("keydown");
});
document.getElementById("input").addEventListener("keyup",function () {
console.log("keyup");
});
</script>
</html>