input的type=file触发的相关事件

与input相关的事件运行的过程。添加了一些相关的方法测试了一下。input的type=file的运行流程。

我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input上面，模拟点击选择了一个文件，触发事件的流程是下面这样的：

（1）mousedown
（2）focus
（3）mouseup
（4）click
（5）blur
（6）focus
（7）change

首先触发了鼠标按下事件，然后就是焦点到了input上面，然后鼠标抬起，触发click点击事件，失去焦点以后弹出了文件选择框，选中文件以后触发焦点，最后触发的change事件。

如果你没有选择文件的话，直接点击取消的话，就不会触发change事件。

所以说，如果要监听input 的type=file的内容变更事件的话，最好直接用change事件去监听。

附上案例代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <input type="file" 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");
     });

 </script>
 </html>