input的type=file触发的相关事件

来源：互联网发布：strcontains php 编辑：程序博客网时间：2024/06/15 16:17

今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与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>

阅读全文

0 0