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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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连接MongoDB示例代码
2012/09/06 PHP
php中error与exception的区别及应用
2014/07/28 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
详解Python Socket网络编程
2016/01/05 Python
用Python编写简单的微博爬虫
2016/03/04 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Pytorch的mean和std调查实例
2020/01/02 Python
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
学习党课思想汇报
2013/12/29 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
2014信息公开实施方案
2014/02/22 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
产品质量保证书
2014/04/29 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
植物园观后感
2015/06/11 职场文书
疾病证明书
2015/06/19 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB