jQuery键盘事件，绑定事件与移除事件，复合事件

键盘事件是指每次按下或者释放键盘上得按键时所产生的事件，常用的键盘事件的方法：

keydown() :按下键盘时触发的事件方法；

keyup() :释放按键时触发的事件方法；

keypress() :产生可打印的字符时触发的事件方法；

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script type="text/javascript">
       $(document).keydown(function(event){
          //按下回车键时触发，keyCode为13时，表示回车键
          if(event.keyCode=="13"){
              alert("你按下了回车键");
          }
       });
   </script>
</head>
<body>

</body>
</html>

未按下回车键时：

按下回车键时：

绑定事件：

1.绑定一个事件：jQuery对象.blind(type,[data],fn);

2.绑定多个事件：jQuery对象.blind(type:fn,type:fn,...,type:fn);

type: 事件类型，如click , focus , mouseover等

data: 可选参数，可以作为event.data的属性值，传递给事件对象额外的数据；

fn: 处理函数，用来绑定该事件的处理函数。

绑定单个事件：

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script>
       $(document).ready(function(){
           $("#dog").bind("click",function(){
           $(this).css("background-color","yellow");
       });
       });
   </script>
</head>
<body>
   <div id="dog" style="border: 1px solid blue;">我们时英雄</div>
</body>
</html>

未点击<div>时：

点击<div>后：

绑定多个事件：

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script>
       $(document).ready(function(){
           $("#myDog").bind({
               mouseover:function(){
                   $(this).css("background-color","yellow");
               },
               mouseout:function(){
                   $(this).css("background-color","blue");
               }
           });
       });
   </script>
</head>
<body>
   <div id="myDog">wo are hero</div>
</body>
</html>

鼠标未移动到<div>时：

鼠标移动到<div>时:

鼠标离开<div>时：

移除事件：

jQuery对象。unbind([type],[fn])

type: 事件类型，如click,focus,mouseover等

fn: 处理函数，用于解除绑定的事件函数。

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

复合事件：

jQuery对象.hover(fn1,fn2)

其中，fn1相当于mouseover(),fn2相当与mouseout()。

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script>
       $(document).ready(function(){
           $("#myDog").hover(
               function(){
                   $(this).css("background-color","greenyellow");
               },
               function(){
                   $(this).css("background-color","blue");
               }
           );
       });
   </script>
</head>
<body>
   <div id="myDog">wo are hero</div>
</body>
</html>

鼠标未移动到<div>时：

鼠标移动到<div>时：

鼠标离开到<div>时：

jQuery键盘事件，绑定事件与移除事件，复合事件

猜你喜欢