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

最新推荐文章于 2024-04-17 09:36:59 发布

暮志未晚NAN

最新推荐文章于 2024-04-17 09:36:59 发布

阅读量9.5w

点赞数 24

分类专栏： html5 文章标签： input事件 input改变事件 typefile

本文链接：https://blog.csdn.net/qq_30100043/article/details/76408184

版权

html5 专栏收录该内容

46 篇文章 3 订阅

订阅专栏

今天突然用到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>

暮志未晚NAN

关注

24
点赞
踩
53

收藏

觉得还不错? 一键收藏
6
评论
input的type=file触发的相关事件

今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input
复制链接

扫一扫