元素从失去焦点到其他元素被点击期间的事件

最新推荐文章于 2025-05-23 20:45:34 发布

justforuse

最新推荐文章于 2025-05-23 20:45:34 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css javascript 文章标签：表单事件

本文链接：https://blog.youkuaiyun.com/u014291497/article/details/73038446

html/css 同时被 2 个专栏收录

75 篇文章

订阅专栏

javascript

55 篇文章

订阅专栏

在填写表单并点击提交时，输入框的blur事件与按钮的click事件有特定顺序。mousedown事件可以确保在点击按钮时优先执行。onchange事件在非IE浏览器中，输入状态下的回车也会触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设我们正在填写一张表单，输入完文本内容后，点击提交按钮；那么在这期间，对于这两个表单元素来说都发生了哪些事件呢？

<body>
    <input type="text" onblur="inputBlur()" onchange="inputChange()"> 
    <button onclick="btnClick()" onmousedown="btnMouseDown()" onmouseup="btnMouseUp()">OK</button>

    <script>
        //input失去焦点
        function inputBlur(){
            console.log("input blur");
        }
        //input值变化
        function inputChange(){
            console.log("input change");
        }
        //按钮click事件
        function btnClick(){
            console.log("btn click");
        }
        //按钮mousedown事件
        function btnMouseDown(){
            console.log("btn mousedown");
        }
        //按钮mouseup事件
        function btnMouseUp(){
            console.log("btn mouseup");
        }
    </script>
</body>

效果图：
这里写图片描述

从输出可以看出blur事件并不总是首先发生的，可能与我的认知不一样。。但是正因如此才可以使用mousedown事件来保证在点击按钮的时候先执行按钮事件函数而不是执行输入框的blur响应函数。

注：
onchange事件触发条件为输入框值改变且失去焦点（但是非IE浏览器中，在元素输入状态下按回车也会触发onchange事件）
click事件的执行顺序为mousedown -> mouseup -> click
dblclick事件的执行顺序为mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick