jQuery事件——window，鼠标，键盘，表单，绑定与移除，复合事件

阳光穿透心脏的1/2处 2022-03-22 14:24 445阅读 0赞

众所周知，页面被加载时，会触发load事件，事件在元素对象与功能代码中起着重要的桥梁作用。

**事件分类：**

*  简单事件
 *  复合事件

复合事件是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

**简单事件：**

*  window事件
 *  鼠标事件
 *  键盘事件
 *  表单事件

**window事件**：当用户执行某些会影响浏览器的操作时，而触发的事件。for instance：打开网页时加载页面，关闭窗口，调节窗口大小等操作引发的事件处理。常用的就是文档就绪事件，ready（）

**鼠标事件**：click（）；mouseover();mouseout();等事件

**键盘事件**：常见的keydown();keyup()和keypress()

**表单事件**：所有事件类型中最稳定，且支持最稳定的事件之一。  
focus（）和blur(),分别是获得焦点和失去焦点

绑定事件与移除事件  
如果需要为匹配的元素同时绑定一个或多个事件，可以使用bind（）方法，语法格式：

bind(type,[data],fn);

<table> 
 <thead> 
  <tr> 
   <th>参数类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>事件类型，click等</td> 
  </tr> 
  <tr> 
   <td>[data]</td> 
   <td>传递给事件对象的额外数据对象，该参数不是必需的</td> 
  </tr> 
  <tr> 
   <td>fn</td> 
   <td>用来绑定的处理函数</td> 
  </tr> 
 </tbody> 
</table>

绑定click事件

$("input[name=xiong]").bind("click",function(){
           $("p").css("background-color","#F30");
           });

同时绑定多个事件

$("input[name=xiong]").bind("click",function(){
          mouseover:function(){
                 $("ul").css("display","none");
                 },
          mouseout:function(){
               $("ul").css("display","block");
                 }
           });

移除事件

unbind(type,fn);//type为事件类型，fn为处理函数

当unbind()不带参数时，表示移除所绑定的全部事件

复合事件  
在jQuery中有两个复合事件方法——hover（）和toggle（）方法，和ready（）类似，都是jQuery自定义的方法  
hover（）用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时，会触发指定的第一个函数（enter）；鼠标指针移出这个元素时，会触发指定的第二个函数（leave），相当于mouseover和mouseout事件的组合。

$("p").hover(function(){
        $("p").css("background-color","yellow");
    },function(){
        $("p").css("background-color","pink");
    });

在jQuery，toggle（）方法用于模拟鼠标连续click事件。第一次单击，触发指定的一个函数，第二次单击，触发第二个函数，依次下去。

$("p").toggle(
      function(){
      $("body").css("background-color","green");},
      function(){
      $("body").css("background-color","red");},
      function(){
      $("body").css("background-color","yellow");}
    );