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>

巴特西

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

最新文章

热门文章