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=" ...
随机推荐
- gulp中pipe的作用和来源
gulp的pipe方法是来自nodejs stream API的,并不是gulp本身源码所定义的. 一.pipe方法的作用 pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gu ...
- Java中关键字static的使用
static 关键字 1).static只能修饰成员变量或成员方法,所有非静态是对象相关的,所有静态是类相关的. 2)被static修饰的成员变量成员方法独立于该类的任何对象,它不依赖类的特定的实例, ...
- PHP Cron Expression Parser ( LARAVEL )
The PHP cron expression parser can parse a CRON expression, determine if it is due to run, calcul ...
- 那些年，UI设计师还在手工标注和切图时走的弯路
在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付.每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的. UI设 ...
- c++ boost 苹果内购 IAP验证
// 1111.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <cstdlib> #include <i ...
- RSS阅读
添加自己的RSS源,订阅信息更高效.一目十行,快速获取信息的效果.
- OneZero第三周第二次站立会议（2016.4.5）
1. 时间: 13:00--13:15 共计15分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...
- C# 使用 HttpPost 请求调用 WebService
之前调用 WebService 都是直接添加服务引用,然后调用 WebService 方法的,最近发现还可以使用 Http 请求调用 WebService.这里还想说一句,还是 web api 的调用 ...
- 2G内存编译android4.0
http://blog.csdn.net/leerobin83/article/details/7873229 1.Error occurred during initialization of VM ...
- 在myeclipse上发布自己的webservice
什么是WebServices? 它是一种构建应用程序的普遍模型,可以在任何支持网络通信的操作系统中实施运行;它是一种新的web应用程序分支,是自包含.自描述.模块化的应用,可以发布.定位.通过w ...