與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>