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事件参考手册。

jQuery 事件

什么jQuery事件

jQuery事件语法

常用的jQuery事件方法

on()方法