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触发的相关事件的更多相关文章
- 如何获取input框type=file选中的文件对象（FileReader）
$("input[type='file']").change(function() { var file = this.files[0]; if (window.FileReade ...
- 更改input【type=file】样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 修改input标签type=file类型的文字
<form name="form" id="form" method="post" enctype="multipart/f ...
- input输入框type=file时accept中可以限制的文件类型（转载）
转载自: input type=file accept中可以限制的文件类型 在上传文件的时候,需要限制指定的文件类型. <input type="file" accept=& ...
- input标签type="file"上传文件的css样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- input框type=file设置cursor:pointer的问题
为了让美化上传文件框,设置了cursor:pointer;,然而不起作用,然后百度找到了解决方法,设置font-size:0,这样就可以了.
- 有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...
- angularjs中使用 <input type="file">标签实现一次最多上传5张图片
前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...
- 美化 input type=file控件
大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...
随机推荐
- PAT 1076 Wifi密码（15）（代码）
1076 Wifi密码(15 分) 下面是微博上流传的一张照片:"各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B- ...
- Python如何管理内存？
对于Python来说,内存管理涉及所有包含Python对象和堆. Python内存管理器在内部确保对堆的管理和分配. Python内存管理器具有不同的组件,可处理各种动态存储管理方面,如共享,分段,预 ...
- UI设计：C4D作品案例分享
中文名4D电影,外文名CINEMA 4D,研发公司为德国Maxon Computer,特点为极高的运算速度和强大的渲染插件,使用在电影<毁灭战士>.<阿凡达>中,获得贸易展中最 ...
- TCP与UDP传输协议
目录结构: contents structure [-] 1 TCP协议和UDP协议的比较 1.1 TCP协议 TCP的全称是Transmission Control Protocol (传输控制协议 ...
- 64位ubuntu 兼容32位
http://www.cnblogs.com/mliudong/p/4086797.html 首先要打开64位系统对32位的支持 第一步:确认64为架构的内核 dpkg --print-archite ...
- Rigidbody.Is Kinematic和碰撞体
Rigidbody组件拥有一个Is Kinematic的属性,该属性可以将其从引擎的控制中移除,从而可以用脚本控制GO的运动.注意:尽量不要使用脚本控制该属性的开关. Colliders(碰撞器) C ...
- centos7 lvm实例
1.lvm安装 rpm -qa|grep lvm lvm version yum install -y lvm2* 2.磁盘分区 fdisk -l fdisk /dev/xvdb1 #分区结束标记 t ...
- 2018.11.06 bzoj1835: [ZJOI2010]base 基站选址（线段树优化dp）
传送门 二分出每个点不需要付www贡献的范围,然后可以推出转移式子: f[i][j]=f[i−1][k]+value(k+1,j)+c[i]f[i][j]=f[i-1][k]+value(k+1,j) ...
- WPF中的依赖项属性（转）
出处:https://www.cnblogs.com/axzxs2001/archive/2010/04/25/1719857.html 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越 ...
- 使用PostSharp在.NET平台上实现AOP（转）
出处:https://www.cnblogs.com/leoo2sk/archive/2010/11/30/aop-postsharp.html 摘要 本文首先介绍AOP(面向方面编程)的相关概念及理 ...