与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触发的相关事件的更多相关文章

  1. 如何获取input框type=file选中的文件对象（FileReader）

    $("input[type='file']").change(function() { var file = this.files[0]; if (window.FileReade ...

  2. 更改input【type=file】样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 修改input标签type=file类型的文字

    <form name="form" id="form" method="post" enctype="multipart/f ...

  4. input输入框type=file时accept中可以限制的文件类型（转载）

    转载自: input type=file accept中可以限制的文件类型 在上传文件的时候,需要限制指定的文件类型. <input type="file" accept=& ...

  5. input标签type="file"上传文件的css样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. input框type=file设置cursor:pointer的问题

    为了让美化上传文件框,设置了cursor:pointer;,然而不起作用,然后百度找到了解决方法,设置font-size:0,这样就可以了.

  7. 有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制

    遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...

  8. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  9. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

随机推荐

  1. 事件类型（js）

    焦点事件:在页面获得或失去焦点时触发. 与document.hasFocus和document.activeElement属性配合,可以得到用户在页面的行踪. blur:元素失去焦点时触发.这个事件不 ...

  2. docker 运行nginx并进入容器内部、端口映射

    一.docker运行容器 1.从网易蜂巢镜像仓库下载nginx镜像 : 2.拉取镜像到本地,并查看本地的镜像: $ docker pull hub.c..com/library/node:latest ...

  3. [Robot Framework] SikuliLibrary的关键字执行依赖java进程，但是上次的java进程如果没有杀掉，robot framework控制台的日志出不来，怎么办？

    如果在suite的setup里面杀掉java进程:AutoItLibrary.Run | taskkill /F /IM java.exe 执行sikuli的关键字会报这样的错误: Connectio ...

  4. serial -1

    #include <reg52.h>#include <stdio.h>#define uchar unsigned charsbit LED = P2^2;uchar rec ...

  5. 如何从平面设计转行到UI设计？

    时代的变迁,科技的进步,工具的发展,薪资的差距,促使许多人转行的原因,但平面与界面两者之间有着哪些的差异呢?如果,想要转行又该具备哪些条件呢? 平面.界面设计之间的差异性 平面设计以『视觉』为主轴,强 ...

  6. openssl初步使用

    centos平台 md5.c #include <stdio.h> #include <string.h> #include <stdlib.h> //#inclu ...

  7. Android中关于使用空格对齐文字

    前言:今日编写新项目UI时,突然遇到文本有长有短无法对齐的问题(汗,以前竟从未遇到也从未考虑过这小小的问题),在资源文件中尝试Tab键.space空格键,发现效果都不能很好的实现,无奈只得请求度娘的协 ...

  8. 通过 Spring Security配置 解决X-Frame-Options deny 造成的页面空白 iframe调用问题

    spring Security下,X-Frame-Options默认为DENY,非Spring Security环境下,X-Frame-Options的默认大多也是DENY,这种情况下,浏览器拒绝当前 ...

  9. 2G内存编译android4.0

    http://blog.csdn.net/leerobin83/article/details/7873229 1.Error occurred during initialization of VM ...

  10. mysql字符集调整总结

    字符集是一套符号和编码的规则,不论是在oracle数据库还是在mysql数据库,都存在字符集的选择问题.对于数据库来说,字符集又是比较重要的,因为数据库存储的数据大部分都是各种文字,字符集对于数据库的 ...