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使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
js实现文章目录索引导航(table of content)
May 10 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php给图片加文字水印
2015/07/31 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python list操作用法总结
2015/11/10 Python
Python全局变量用法实例分析
2016/07/19 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python