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=" ...
随机推荐
- 让键盘输入不影响界面的动态效果（C++）
输入语句,当代码运行到它的时候就要等待输入,才能执行下一行代码,如果不输入的话,就相当于在这里暂停了(程序设计老师讲过通过这样的方式以达到暂停(pause)的效果),但如果我们想要如果没输入仍然可以运 ...
- PAT 1050 螺旋矩阵(25)（代码）
1050 螺旋矩阵(25)(25 分) 本题要求将给定的N个正整数按非递增的顺序,填入"螺旋矩阵".所谓"螺旋矩阵",是指从左上角第1个格子开始,按顺时针螺旋方 ...
- 一个比较有意思的SDN网络技术相关blog/doc
http://feisky.xyz/sdn/linux/index.html 涵盖了目前主流的网络技术,所有比较有意思的内容全都覆盖了 SDN网络 目录 基本网络 TCP/IP标准模型 DHCP与DN ...
- PLSQL数组
declare type t_varchar_arr is TABLE OF varchar2(60); type t_number_arr is TABLE OF number; v_date t_ ...
- SecureCRT乱码解决
本文不涉及编码,只说明ssh问题产生的乱码 如果终端中输出以下字符,就会出现乱码 echo -e '\xe' 还有 ctrl+v,ctrl+n也能产生乱码 恢复方法 echo -e '\xf'
- mybatis学习 十四 resultMap标签 一对一(联合查询)
1.使用 resultMap 实现关联单个对象(联合查询方式) <resultMap type="Student" id="stuMap1"> &l ...
- svn log — 显示提交日志信息
http://www.cnblogs.com/eoiioe/archive/2009/01/06/1370580.html 概要svn log [PATH]svn log URL [PATH...]描 ...
- MVVM中viewmodel的理解
网上有人写了这段话,我也有同感,特别是第一种用法,很重要,后一种用法,我觉得是把第一种用法加入controller中了. 第一种 “view model” 是 “model for the view” ...
- NOIP2017普及组T1题解
神奇的链接 上面时题目. 其实不得不说,这一题很水,比2015年的第一题水多了. 直接按题目套公式就行了,当然你也可以像我一样化简一下. 直接看代码: #include<cstdio> # ...
- 棋盘问题（NOIP1997）
题目链接:棋盘问题 这道题水不水呢?还是很水的,为什么?因为数据太小了.直接算就行了. #include<bits/stdc++.h> using namespace std; int m ...