input的type=file触发的相关事件
与input相关的事件运⾏的过程。添加了⼀些相关的⽅法测试了⼀下。input的type=file的运⾏流程。
input绑定onblur事件我们书写了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事件去监听。
附上案例代码：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Title</title>
6</head>
7<body>
8<input type="file" id="input">
9</body>
10<script>
11    ElementById("input").addEventListener("focus",function () {
12        console.log("focus");
13    });
14
15    ElementById("input").addEventListener("mousedown",function () {
16        console.log("mousedown");
17    });
18
19    ElementById("input").addEventListener("mouseup",function () {
20        console.log("mouseup");
21    });
22
23    ElementById("input").addEventListener("input",function () {
24        console.log("input");
25    });
26
27    ElementById("input").addEventListener("change",function () {
28        console.log("change");
29    });
30
31    ElementById("input").addEventListener("blur",function () {
32        console.log("blur");
33    });
34
35    ElementById("input").addEventListener("click",function () {
36        console.log("click");
37    });
38
39
40</script>
41</html>
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。