jQuery常用表单事件执行顺序

       <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事件。




转载于:https://www.cnblogs.com/hcxwd/p/7455248.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值