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=" ...
随机推荐
- Java基础之—反射
反射是框架设计的灵魂 (使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码)) 一.反射的概述 JAVA反射机制是在运行状态中,对于任意一个类,都能够 ...
- java.lang.AbstractMethodError: javax.servlet.jsp.JspFactory.getJspApplicationContext(Ljavax/servlet/ServletContext;)Ljavax/servlet/jsp/JspApplicationContext;
在Tomcat下部署应用时会报这个错误,参考以下这篇博客:http://blog.csdn.net/robinsonmhj/article/details/37653189,删除Tomcat目录下we ...
- Linux命令大全完整版
1. linux系统管理命令 adduser 功能说明:新增用户帐号.语 法:adduser补充说明:在Slackware中,adduser指令是个script程序,利用交谈的方式取得输入的用户帐 ...
- POJ 3469.Dual Core CPU 最大流dinic算法模板
Dual Core CPU Time Limit: 15000MS Memory Limit: 131072K Total Submissions: 24830 Accepted: 10756 ...
- java 环境搭建
一.安装jdk 下载jdk http://www.oracle.com/technetwork/java/javase/downloads 将下载的jdk文件放到 /opt 下解压 $sudo cp ...
- 工具类官网Web原型制作分享-Adobe
Adobe是全球知名的软件开发团队,研发了设计创意领域全球领先的优秀软件产品,为设计行业提供了巨大的价值. 网站原型以图文排版为主,顶部一级导航,弹出面板和面板的使用实现了一级导航下拉的效果. 本原型 ...
- [C#]WinForm动态删除控件 Controls.Remove()
今天遇到一个奇怪的问题,在WinForm内动态添加Button后再动态的移除,发生稀奇古怪的现象,Button控件只被规律的移除,没有完全移除 foreach (Control c in this.C ...
- IT资产管理详解
- syslog系统日志、Windows事件日志监控
- 解决IDEA、Pycharm连接数据库乱码的问题
一.IDEA. 使用IDEA连接数据库: import java.sql.Connection;import java.sql.DriverManager;import java.sql.Result ...