jQuery常用表单事件执行顺序

Posted 2020-10-04 清风晰心

       <input type="text" id="input"/>
        <script>
            // 点击测试
            var input = document.getElementById("input");
            $(\'input\').hover(function(){
                console.log("hover-in");
            },function(){
                console.log("hover-out");
            });
            input.addEventListener("mouseover", function(){
                console.log("mouseover");
            });
            input.addEventListener("mouseout", function(){
                console.log("mouseout");
            });
            input.addEventListener("mouseenter", function(){
                console.log("mouseenter");
            });
            input.addEventListener("mouseleave", function(){
                console.log("mouseleave");
            });
            input.addEventListener("mousedown", function(){
                console.log("mousedown");
            });
            input.addEventListener("mouseup", function(){
                console.log("mouseup");
            });
            input.addEventListener("focus", function(){
                console.log("focus");
            });
            input.addEventListener("click", function(){
                console.log("click");
            });
            input.addEventListener("keydown", function(){
                console.log("keydown");
            });
            input.addEventListener("keyup", function(){
                console.log("keyup");
            });
            input.addEventListener("change", function(){
                console.log("change");
            });
            input.addEventListener("blur", function(){
                console.log("blur");
            });
            
        </script>

 

由图可见：
1.移入顺序 mouserover > hover > mouseenter
2.按键顺序 mousedowm  > focus > mouseup > click > keydowm > keyup 
3.移出顺序 mouseout   > hover > mouseleave > change > blur    

要注意的问题：
1.mouseover&mouseout，hover事件会冒泡，mouseenter&mouseleave阻止冒泡。

2.由于JavaScript为单线程，同一时间只能执行处理一个事件。当blur事件和click事件同事触发的时候，会先执行blur事件。