4-1 jQuery键盘事件之keydown()与keyup()事件

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是一致的只是触发的条件是方法的

 

注意：

  • keydown是在键盘按下就会触发
  • keyup是在键盘松手就会触发
  • 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

 

 

任务

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

在47行处，监听用户的按下事件
在53行处，监听用户的松手事件
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    em{
        font-weight: 900;
        color: red;
    }
    </style>
   <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>

<body>
    <h2>keydown()与keyup()事件</h2>
    <div class="left">
        <h4>测试一</h4>
        <div class="aaron">监听keydown输入:
            <input class="target1" type="text" value="" /><br />
            按下显示输入的值:<em></em>
        </div>
        <h4>测试二</h4>
        <div class="aaron">监听keyup输入:
            <input class="target2" type="text" value="" /><br />
            松手显示输入的值:<em></em>
        </div>
    </div>

    <script type="text/javascript">
    //监听键盘按键
    //获取输入的值
    $('.target1').?(function(e) {
        $("em:first").text(e.target.value)
    });

    //监听键盘按键
    //获取输入的值
    $('.target2').?(function(e) {
        $("em:last").text(e.target.value)
    });

    </script>

</body>

</html>

 

posted @ 2017-11-13 23:49  罪恩徒斯  阅读(874)  评论(0)    收藏  举报