与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. kvm介绍 转载

    KVM 介绍(1):简介及安装 学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I ...

  2. POJ2230 Watchcow

    原题链接 类欧拉回路,要求每条边被正反各经过一次,且从\(1\)出发并回到\(1\). 只需每次搜索该点的边时,将该点的边对应的邻接表头及时修改为下一条即可,因为邻接表恰好储存了正反方向的边,所以及时 ...

  3. iOS最全的常用正则表达式大全

    很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,包括校验数字.字符.一些特殊的需求等等.给自己留个 ...

  4. Python GUI中 text框里实时输出

    首先GUI中不同函数的局部变量的问题. 发现不同button定义的函数得到的变量无法通用. 通过global 函数内的变量可以解决这个问题 def openfiles2(): global s2fna ...

  5. Linux安装及入门

    Linux安装及学习 Linux遇到的问题: 在安装过程中因为代码输错(少空格)而质疑自己下载的ubuntu和virtualbox版本,于是卸载之后重新安装了一次,后来才发现是代码输错了(教程中的空格 ...

  6. Two Sum III - Data structure design LT170

    Design and implement a TwoSum class. It should support the following operations:add and find. add - ...

  7. nginx gzip on 无效

    优化页面的时候,使用nginx开启gzip ,发现并没有什么反映~ 在nginx.conf中的配置如下: gzip on; gzip_min_length 1k; gzip_buffers 16k; ...

  8. DataTable xml 互相转换

    //测试方法 public static DataTable Test() { string savePath = System.AppDomain.CurrentDomain.BaseDirecto ...

  9. https传输过程嗅探

    C1->浏览器告知服务器自身的信息 length = 165 a5 16 03 01 00 A0 01 00 00 9C 03 03 5E 1C 37 CD 40 [ ^ 7 @] B6 4A ...

  10. 对团队项目的NABCD的分析

    需求(N):我们的软件是面向广大想记录自己所爱动植物成长点滴的人.目前没有很好地软件,只有手机或者电脑上的笔记本和备忘录. 做法(A):我们的软件可以交流可以节约积累知识的时间,将记录从记事本中摘出来 ...