js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解
經(jīng)常需要監(jiān)聽鍵盤的事件，以便做更好的操作，基本原理是：監(jiān)聽全局鍵盤，每一個(gè)鍵盤，當(dāng)用戶按下某一按鍵時(shí)，返回對(duì)應(yīng)的鍵值，然后再判斷用戶按下了哪一科按鍵，鍵值對(duì)應(yīng)按鍵的名稱在最下面列出，自行比對(duì)。去以下介紹兩種不同的方式
原生鍵盤監(jiān)聽事件：按下一次按鍵，分為三個(gè)過程，按下—按住—松開
onkeydown：某個(gè)鍵被按下
onkeypress：某個(gè)鍵盤的鍵被按下或按住
onkeyup：某個(gè)鍵盤的鍵被松開
使用方法，一般來(lái)說(shuō)，鍵盤監(jiān)聽是直接在整個(gè)頁(yè)面文檔上進(jìn)行監(jiān)聽的，也就是document上
以下是原生的使用案例
//實(shí)際使用
document.onkeydown=function(e){ //對(duì)整個(gè)頁(yè)面文檔監(jiān)聽
var keyNum=window.event ? e.keyCode :e.which; //獲取被按下的鍵值
//判斷如果用戶按下了回車鍵（keycody=13）
if(keyNum==13){
alert('您按下了回車');
}
//判斷如果用戶按下了空格鍵(keycode=32)，
if(keyNum==32){
alert('您按下了空格');
}
剩下另外兩個(gè)按鍵方法同理
jquery的方式監(jiān)聽鍵盤事件
jquery的也分為三個(gè)過程，但是在事件名稱上有所不同
keyup：某個(gè)鍵盤的鍵被松開
keydown：某個(gè)鍵被按下
keypress：某個(gè)鍵盤的鍵被按下或按住
使用方法：
$(document).keyup(function(event){
switch(event.keyCode) {
case 27:
alert('您按下了回車');
return;
case 13:
alert('您按下了空格');
return;
}
});
小總結(jié)：總體來(lái)說(shuō)，這兩種方式達(dá)到的效果都是一樣的，只是由于jquery的獲取對(duì)象更加簡(jiǎn)單，所以一般更推介使用jquery，當(dāng)然，如果你有jquery基礎(chǔ)的話。
以上就是小編為大家?guī)?lái)的js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
javascript實(shí)現(xiàn)的字符串與十六進(jìn)制表示字符串相互轉(zhuǎn)換方法
這篇文章主要介紹了javascript實(shí)現(xiàn)的字符串與十六進(jìn)制表示字符串相互轉(zhuǎn)換方法,涉及javascript字符串轉(zhuǎn)換的相關(guān)技巧,在防止SQL注入和XSS中具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)
下面小編就為大家?guī)?lái)一篇js每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-05-05
javascript重復(fù)綁定事件造成的后果說(shuō)明
最近在修改百度地圖開源的東西,想把里面耦合在一起的代碼給拆分出來(lái),拆解之后,發(fā)現(xiàn)了一些問題,邏輯上沒有問題的情況下,該出現(xiàn)的效果沒有出現(xiàn)2013-03-03
JavaScript中Array.from()的用法總結(jié)
本文主要介紹了JavaScript中Array.from()的用法總結(jié)2023-05-05
右下角彈出提示框想必大家不會(huì)陌生吧，本文簡(jiǎn)單的為大家實(shí)現(xiàn)一個(gè)，具體代碼如下，有需求的朋友可以參考下2013-08-08
這篇文章主要介紹了js過濾HTML標(biāo)簽實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript使用正則表達(dá)式過濾HTML標(biāo)簽的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
微信小程序?qū)崿F(xiàn)點(diǎn)贊業(yè)務(wù)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)贊業(yè)務(wù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
js canvas實(shí)現(xiàn)二維碼和圖片合成的海報(bào)
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)二維碼和圖片合成的海報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法
本篇文章主要介紹了解決bootstrap下拉菜單點(diǎn)擊立即隱藏bug的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
深入理解Javascript中的循環(huán)優(yōu)化
這篇文章介紹了Javascript中的循環(huán)優(yōu)化，有需要的朋友可以參考一下2013-11-11