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# CashCode项目开发
如果不是因为这个项目,我可以一辈子都接触不到识币器,更不会知道CashCode是干啥的. 从项目开始,到CashCode机器到桌面上测试,中间在网上找过资料,也联系过北京的技术,他们发来的PDF让我看 ...
- （转）ScriptManager.RegisterStartupScript方法和Page.ClientScript.RegisterStartupScript() 方法
ScriptManager.RegisterStartupScript方法 如果页面中不用Ajax,cs中运行某段js代码方式可以是: Page.ClientScript.RegisterStartu ...
- Windows 下 Phpstrom 配置git使用
首先先去下载 git 下载链接 https://git-scm.com/download/winphpstrom 配置git 链接 http://jingyan.baidu.com/artic ...
- [Robot Framework] 通过SikuliLibrary可以获取到图片，但是点击失效
执行时,可以看到鼠标已经移动到图片上了,但是点击失效,日志也没有报错 后来发现是windows权限的问题. 通过打开Control Panel->System and Security-> ...
- spring cloud Feign 使用 @RequestLine 注解遇到的问题
package com.itmuch.cloud; import org.springframework.cloud.netflix.feign.FeignClient; import com.itm ...
- 安装linux子系统, 如何用win10 里面的linux子系统来进行通信
cd /mnt/d/linux_share即可 就把linux_share这个目录挂载到linux里面了.这样windows和linux可以同时修改和访问这个文件夹里面的内容. 安装:cmd中输入ba ...
- reduce 之 mixin实现
语法: arr.reduce(callback[, initialValue]) 参数: callback:执行数组中每个值的函数,包含四个参数: accumulator:累加器累加回调的 ...
- 用php脚本比较MySQL两个数据库的结构差异
define('DATABASE1', 'mysql://root:password@127.0.0.1/db1'); $dbi1 = new DbMysql; $dbi1->dbh = DAT ...
- java struts2 的 文件下载
jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco ...
- CRC在线计算工具
http://www.lammertbies.nl/comm/info/crc-calculation.html