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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
如何通过JS实现日历简单算法
Oct 14 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 闭包特性在实际应用中的问题
2009/10/30 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
精彩的英文自荐信
2014/01/30 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
逃课上网检讨书
2014/02/20 职场文书
2015年元旦活动总结
2014/05/09 职场文书
红色故事演讲稿
2014/05/22 职场文书
法制演讲稿
2014/09/10 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
python某漫画app逆向
2021/03/31 Python