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对象的property和prototype是什么一种关系
Aug 06 Javascript
js null undefined 空区别说明
Jun 13 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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
global.php
2006/12/09 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
js读取配置文件自写
2014/02/11 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
四种会话跟踪技术
2015/05/20 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
促销活动策划方案
2014/01/12 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
结对共建协议书
2014/08/20 职场文书
故宫的导游词
2015/01/31 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Python中rapidjson参数校验实现
2021/07/25 Python