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


Posted in Javascript onOctober 10, 2016

经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对。去以下介绍两种不同的方式

原生键盘监听事件:按下一次按键,分为三个过程,按下—按住—松开

onkeydown:某个键被按下
onkeypress:某个键盘的键被按下或按住
onkeyup:某个键盘的键被松开

使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上

以下是原生的使用案例

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

剩下另外两个按键方法同理

jquery的方式监听键盘事件

jquery的也分为三个过程,但是在事件名称上有所不同

keyup:某个键盘的键被松开

keydown:某个键被按下

keypress:某个键盘的键被按下或按住

使用方法:

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

小总结:总体来说,这两种方式达到的效果都是一样的,只是由于jquery的获取对象更加简单,所以一般更推介使用jquery,当然,如果你有jquery基础的话。

以上就是小编为大家带来的js监听键盘事件的方法_原生和jquery的区别详解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 #Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 #Javascript
js中获取键盘事件的简单实现方法
Oct 10 #Javascript
轻松实现jquery选项卡切换效果
Oct 10 #Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 #Javascript
Javascript生成带参数的二维码示例
Oct 10 #Javascript
详细讲解JavaScript中的this绑定
Oct 10 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
wxPython 入门教程
2008/10/07 Python
Python 元类实例解析
2018/04/04 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python适配器模式代码实现解析
2019/08/02 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
服装销售人员求职自我评价
2013/09/26 职场文书
个人查摆剖析材料
2014/02/04 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
护士年终个人总结
2015/02/13 职场文书
中英文求职信范文
2015/03/19 职场文书
歌咏比赛主持词
2015/06/29 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
正确使用MySQL update语句
2021/05/26 MySQL
Java8中Stream的一些神操作
2021/11/02 Java/Android
Pandas搭配lambda组合使用详解
2022/01/22 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL