jQuery鍵盤事件之keydown()與keyup()事件
鼠標(biāo)有mousedown,mouseup之類的事件，這是根據(jù)人的手勢(shì)動(dòng)作分解的2個(gè)觸發(fā)行為。相對(duì)應(yīng)的鍵盤也有這類事件，將用戶行為分解成2個(gè)動(dòng)作，鍵盤按下與松手，針對(duì)這樣的2種動(dòng)作，jQuery分別提供了對(duì)應(yīng)keydown與keyup方法來(lái)監(jiān)聽(tīng)
keydown事件：
當(dāng)用戶在一個(gè)元素上第一次按下鍵盤上字母鍵的時(shí)候，就會(huì)觸發(fā)它。使用上非常簡(jiǎn)單，與基本事件參數(shù)處理保持一致，這里使用不在重復(fù)了，列出使用的方法
//直接綁定事件
$elem.keydown( handler(eventObject) )
//傳遞參數(shù)
$elem.keydown( [eventData ], handler(eventObject) )
//手動(dòng)觸發(fā)已綁定的事件
$elem.keydown()
keyup事件：
當(dāng)用戶在一個(gè)元素上第一次松手鍵盤上的鍵的時(shí)候，就會(huì)觸發(fā)它。使用方法與keydown是一致的只是觸發(fā)的條件是方法的
注意：
- keydown是在鍵盤按下就會(huì)觸發(fā)
- keyup是在鍵盤松手就會(huì)觸發(fā)
- 理論上它可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中，可獲得焦點(diǎn)的元素略有不同，但是表單元素總是能獲取焦點(diǎn)，所以對(duì)于此事件類型表單元素是最合適的。
任務(wù)
在右邊代碼47 53行處，分別填入任務(wù)代碼
在47行處，監(jiān)聽(tīng)用戶的按下事件
在53行處，監(jiān)聽(tīng)用戶的松手事件
<!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://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>keydown()與keyup()事件</h2>
<div class="left">
<h4>測(cè)試一</h4>
<div class="aaron">監(jiān)聽(tīng)keydown輸入:
<input class="target1" type="text" value="" /><br />
按下顯示輸入的值:<em></em>
</div>
<h4>測(cè)試二</h4>
<div class="aaron">監(jiān)聽(tīng)keyup輸入:
<input class="target2" type="text" value="" /><br />
松手顯示輸入的值:<em></em>
</div>
</div>
<script type="text/javascript">
//監(jiān)聽(tīng)鍵盤按鍵
//獲取輸入的值
$('.target1').?(function(e) {
$("em:first").text(e.target.value)
});
//監(jiān)聽(tīng)鍵盤按鍵
//獲取輸入的值
$('.target2').?(function(e) {
$("em:last").text(e.target.value)
});
</script>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
