与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事件去监听。
附上案例代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="file" id="input"> 9 </body> 10 <script> 11 document.getElementById("input").addEventListener("focus",function () { 12 console.log("focus"); 13 }); 14 15 document.getElementById("input").addEventListener("mousedown",function () { 16 console.log("mousedown"); 17 }); 18 19 document.getElementById("input").addEventListener("mouseup",function () { 20 console.log("mouseup"); 21 }); 22 23 document.getElementById("input").addEventListener("input",function () { 24 console.log("input"); 25 }); 26 27 document.getElementById("input").addEventListener("change",function () { 28 console.log("change"); 29 }); 30 31 document.getElementById("input").addEventListener("blur",function () { 32 console.log("blur"); 33 }); 34 35 document.getElementById("input").addEventListener("click",function () { 36 console.log("click"); 37 }); 38 39 40 </script> 41 </html>
