zoukankan      html  css  js  c++  java
  • 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事件。




  • 相关阅读:
    窗体控件随窗体大小改变(包括字体大小)
    Silverlight数据加载时,等待图标显示与隐藏(Loading)
    鼠标经过时,地图上的每个城市变颜色并且有提示框
    开始博客生活
    光纤
    静态路由配置(Static Routing)
    对称加密与非对称加密
    RIP Debug 过程
    WORD 固定表头自动生成/在Word表格接续页加上重复表格标题
    RIP路由
  • 原文地址:https://www.cnblogs.com/hcxwd/p/7455248.html
Copyright © 2011-2022 走看看