input输入框type=text触发的相关事件

最新推荐文章于 2024-04-19 16:38:00 发布

暮志未晚NAN

最新推荐文章于 2024-04-19 16:38:00 发布

阅读量1.6w

点赞数 1

分类专栏： html5 文章标签： input事件 input输入触发事件 html5的input事件

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

版权

html5 专栏收录该内容

46 篇文章 3 订阅

订阅专栏

我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面，模拟客户输入相关事件的触发流程：

首先还是先触发了鼠标按下事件，然后触发了焦点，接着鼠标抬起，触发click事件。到了这里客户开始输入信息了，keydown，keyup，keydown，keyup的循环，因为用的输入法，所以字还没打出来的时候（敲回车的时候）不会触发input的，当input框里面的内容被改变的时候，则会触发input事件。一直这样循环到鼠标焦点离开触发blur。这就是一整个循环，注意：input事件属于html5事件。input=text不会触发change事件。

下面附上案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" 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");
    });

    document.getElementById("input").addEventListener("keydown",function () {
        console.log("keydown");
    });

    document.getElementById("input").addEventListener("keyup",function () {
        console.log("keyup");
    });

</script>
</html>

暮志未晚NAN

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
input输入框type=text触发的相关事件

我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面，模拟客户输入相关事件的触发流程：首先还是先触发了鼠标按下事件，然后触发了焦点，接着鼠标抬起，触发click事件。到了这里客户开始输入信息了，keydown，keyup，keydown，keyup的循环，因为用的输入法，所以字
复制链接

扫一扫