jQuery 事件



  • 什么jQuery事件

    jQuery是为了响应HTML页面中的事件而量身定制的。
    网页可以响应的所有不同访问者的操作都称为事件。
    事件代表事情发生的确切时刻。
    例子:
    • 将鼠标移到元素上
    • 选择一个单选按钮
    • 点击一个元素
    “火灾/解雇”一词通常用于事件。 示例:“按键时,按键事件被触发”。
    以下是一些常见的DOM事件:
    鼠标事件 键盘事件 表单事件 文档/窗口事件
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave blur unload
    hover
  • jQuery事件语法

    在jQuery中,大多数DOM事件都有一个等效的jQuery方法。
    要将click事件分配给页面上的所有段落,您可以执行以下操作:
       
     $("p").click();
    
    下一步是定义事件触发时应该发生的事情。 您必须将函数传递给事件:
       
     $("p").click(function(){
       // 行动在这里!!
     });
    
  • 常用的jQuery事件方法

    $(document).ready()方法允许我们在文档完全加载时执行函数。 此事件已在jQuery语法章节中进行了解释。
    要查找具有特定id的元素,请写入哈希字符,后跟HTML元素的id:
    click()方法将事件处理函数附加到HTML元素。
    当用户单击HTML元素时,将执行该函数。
    以下示例说明:当单击事件在 <p>元素上触发时; 隐藏当前的 <p>元素:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("p").click(function(){
               $(this).hide();
             });
           });
          </script>
        </head>
    
    dblclick()方法将事件处理函数附加到HTML元素。
    当用户双击HTML元素时,将执行该功能:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("p").dblclick(function(){
               $(this).hide();
             });
           });
          </script>
        </head>
    
    mouseenter()方法将事件处理函数附加到HTML元素。
    当鼠标指针进入HTML元素时执行该函数:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("#p1").mouseenter(function(){
               alert("你鼠标指针移动到了p1!");
             });
           });
          </script>
        </head>
    
    mouseleave()方法将事件处理函数附加到HTML元素。
    当鼠标指针离开HTML元素时执行该函数:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("#p1").mouseleave(function(){
               alert("你鼠标指针离开p1!");
             });
           });
          </script>
        </head>
    
    mousedown()方法将事件处理函数附加到HTML元素。
    当鼠标悬停在HTML元素上时,按下鼠标左键,中键或右键,执行该功能:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("#p1").mousedown(function(){
               alert("将鼠标指针按下在p1上!");
             });
           });
          </script>
        </head>
    
    mouseup()方法将事件处理函数附加到HTML元素。
    当鼠标悬停在HTML元素上时,释放左,中或右鼠标按钮时执行该功能:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("#p1").mouseup(function(){
               alert("鼠标指针按下释放p1!");
             });
           });
          </script>
        </head>
    
    hover()方法有两个函数,它们是mouseenter()mouseleave()方法的组合。
    当鼠标进入HTML元素时执行第一个函数,当鼠标离开HTML元素时执行第二个函数:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("#p1").hover(function(){
               alert("你鼠标指针进入了p1!!");
             },
             function(){
               alert("拜! 你鼠标指针离开了p1!");
             });
           });
          </script>
        </head>
    
    focus()方法将事件处理函数附加到HTML表单字段。
    当表单字段获得焦点时执行该函数:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("input").focus(function(){
               $(this).css("background-color", "#ccc");
             });
           });
          </script>
        </head>
    
    blur()方法将事件处理函数附加到HTML表单字段。
    当表单字段失去焦点时执行该函数:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("input").blur(function(){
               $(this).css("background-color", "red");
             });
           });
          </script>
        </head>
    
  • on()方法

    on()方法为所选元素附加一个或多个事件处理程序。
    将单击事件附加到<p>元素:
       
         <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
              $("p").on("click", function(){
                 $(this).hide();
              });
            });
           </script>
         </head>
    
    将多个事件处理程序附加到<p>元素:
       
         <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
              $("p").on({
                 mouseenter: function(){
                   $(this).css("background-color", "lightgray");
                 }, 
                 mouseleave: function(){
                   $(this).css("background-color", "lightblue");
                 }, 
                 click: function(){
                   $(this).css("background-color", "yellow");
                 } 
               });
            });
           </script>
         </head>
    
    有关完整的jQuery事件参考,请转到我们的jQuery事件参考手册