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 深拷贝函数
Dec 04 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
php json转换相关知识(小结)
2018/12/21 PHP
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python原始套接字编程实例解析
2020/01/29 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python中re模块知识点总结
2021/01/17 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
2016春节慰问信范文
2015/03/25 职场文书
2015年售票员工作总结
2015/04/29 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
实验室安全管理制度
2015/08/05 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL