JavaScript键盘事件响应顺序详解


Posted in Javascript onSeptember 30, 2019

 本文实例为大家分享了JavaScript键盘事件响应顺序的具体实现代码,供大家参考,具体内容如下

键盘响应顺序

当按下键盘时,会触发多个事件,它们将按顺序发生。

对于字符键来说,键盘事件的影响顺序如下:

1.keydown
2.keypress
3.keyup

对于非字符键(如功能键或特殊键)来说,键盘事件的响应顺序如下:

1.keydown
2.keyup

如果按下字符键不放,则keydown和keypress事件将逐个发生,直至松开按键。
如果按下非字符键不放,则只有keydown事件持续发生,直至松开按键。

示例:获取键盘事件响应顺序:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <textarea id="text" cols="26" rows="16"></textarea>
 <script>
 var n = 1;
 var text = document.getElementById("text");
 text.onkeydown = f;
 text.onkeyup = f;
 text.onkeypress = f;
 
 function f(e){
 var e = e || window.event;
 text.value += (n++) + "=" + e.type + " (keyCode=" + e.keyCode + ")\n";
 }
 </script>
 </body>
</html>

输入abc

JavaScript键盘事件响应顺序详解

分别输入Shift、Ctrl、Alt功能键

JavaScript键盘事件响应顺序详解

连续按下字符a

JavaScript键盘事件响应顺序详解

连续按下Shift

JavaScript键盘事件响应顺序详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js substr、substring和slice使用说明小记
Sep 15 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js select option对象小结
Dec 20 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
浅谈js闭包理解
Mar 28 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue自动化路由的实现代码
Sep 30 #Javascript
js实现图片上传即时显示效果
Sep 30 #Javascript
vue实现select下拉显示隐藏功能
Sep 30 #Javascript
createObjectURL方法实现本地图片预览
Sep 30 #Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
如何通过命令行进入python
2020/07/06 Python
彻底解决Python包下载慢问题
2020/11/15 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
实习自我鉴定
2013/12/15 职场文书
经典演讲稿范文
2013/12/30 职场文书
新农村建设典型材料
2014/05/31 职场文书
森林病虫害防治方案
2014/06/02 职场文书
故宫的导游词
2015/01/31 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS