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 相关文章推荐
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
js实现无限瀑布流实例方法
Sep 16 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 和 MYSQL
2006/10/09 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
Vue组件创建和传值的方法
2018/08/17 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Python实现像awk一样分割字符串
2020/09/15 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
军事博物馆观后感
2015/06/05 职场文书
草房子读书笔记
2015/06/29 职场文书
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python