当前位置：首页 > 资讯 > 技术文档

js监听键盘事件的方法_原生和jquery的区别详解

时间：2021-11-11 17:45 编辑：来源：阅读：
扫一扫，手机访问

摘要：js监听键盘事件的方法_原生和jquery的区别详解

经常需要监听键盘的事件，以便做更好的操作，基本原理是：监听全局键盘，每一个键盘，当用户按下某一按键时，返回对应的键值，然后再判断用户按下了哪一科按键，键值对应按键的名称在最下面列出，自行比对。去以下介绍两种不同的方式原生键盘监听事件：按下一次按键，分为三个过程，按下—按住—松开 onkeydown：某个键被按下 onkeypress：某个键盘的键被按下或按住 onkeyup：某个键盘的键被松开使用方法，一般来说，键盘监听是直接在整个页面文档上进行监听的，也就是document上 [b]以下是原生的使用案例[/b]

//实际使用 
document.onkeydown=function(e){  //对整个页面文档监听 
var keyNum=window.event ? e.keyCode :e.which;  //获取被按下的键值 
//判断如果用户按下了回车键（keycody=13）

if(keyNum==13){ 
alert('您按下了回车'); 
} 
 
//判断如果用户按下了空格键(keycode=32)， 
if(keyNum==32){ 
   alert('您按下了空格'); 
  }

[b]剩下另外两个按键方法同理[/b] [b]jquery的方式监听键盘事件[/b] jquery的也分为三个过程，但是在事件名称上有所不同 keyup：某个键盘的键被松开 keydown：某个键被按下 keypress：某个键盘的键被按下或按住 [b]使用方法：[/b]

$(document).keyup(function(event){ 
       switch(event.keyCode) { 
       case 27: 
       alert('您按下了回车'); 
       return; 
       case 13: 
       alert('您按下了空格'); 
       return; 
     
       } 
 });

[b]小总结：[/b]总体来说，这两种方式达到的效果都是一样的，只是由于jquery的获取对象更加简单，所以一般更推介使用jquery，当然，如果你有jquery基础的话。以上就是小编为大家带来的js监听键盘事件的方法_原生和jquery的区别详解全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：微信小程序首页制作简单实例
下一篇：JavaScript实现body内任意节点的自定义属性功能示例

资讯排行榜
更多>>