我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面，模拟客户输入相关事件的触发流程：

input输入框type=text触发的相关事件_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>