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

来源：互联网发布：自己的淘宝账号查询编辑：程序博客网时间：2024/05/16 18:27

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

<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

阅读全文

0 0