4-1 jQuery键盘事件之keydown()与keyup()事件
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery键盘事件之keydown()与keyup()事件

鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

 

keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的

 

注意：

 

 

任务

在右边代码47 53行处，分别填入任务代码

在47行处，监听用户的按下事件
在53行处，监听用户的松手事件
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 500px;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.     }
  17.  
  18.     .left div {
  19.         background: #bbffaa;
  20.     }
  21.     em{
  22.         font-weight: 900;
  23.         color: red;
  24.     }
  25.     </style>
  26.    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  27. </head>
  28.  
  29. <body>
  30.     <h2>keydown()与keyup()事件</h2>
  31.     <div class="left">
  32.         <h4>测试一</h4>
  33.         <div class="aaron">监听keydown输入:
  34.             <input class="target1" type="text" value="" /><br />
  35.             按下显示输入的值:<em></em>
  36.         </div>
  37.         <h4>测试二</h4>
  38.         <div class="aaron">监听keyup输入:
  39.             <input class="target2" type="text" value="" /><br />
  40.             松手显示输入的值:<em></em>
  41.         </div>
  42.     </div>
  43.  
  44.     <script type="text/javascript">
  45.     //监听键盘按键
  46.     //获取输入的值
  47.     $('.target1').?(function(e) {
  48.         $("em:first").text(e.target.value)
  49.     });
  50.  
  51.     //监听键盘按键
  52.     //获取输入的值
  53.     $('.target2').?(function(e) {
  54.         $("em:last").text(e.target.value)
  55.     });
  56.  
  57.     </script>
  58.  
  59. </body>
  60.  
  61. </html>
  62.  
下一节