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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jquery图形密码实现方法
Mar 11 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
javascript实现京东登录显示隐藏密码
Aug 02 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语法(2)
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php处理斐波那契数列非递归方法
2012/02/04 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
浅谈php://filter的妙用
2019/03/05 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
python encode和decode的妙用
2009/09/02 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python修改文件内容的3种方法详解
2019/11/15 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
人力资源行政经理自我评价
2013/10/23 职场文书
安全演讲稿开场白
2014/08/25 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
2014年技术员工作总结
2014/11/18 职场文书
门卫管理制度范本
2015/08/05 职场文书
食品安全主题班会
2015/08/13 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技