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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript中this详解
Sep 01 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
Vue如何实现组件间通信
May 15 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
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
获取URL文件名后缀
2013/10/24 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
php 基础函数
2017/02/10 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
常用jQuery代码分享
2015/07/14 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
js this 绑定机制深入详解
2020/04/30 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python中的函数作用域
2018/05/07 Python
python调用百度语音REST API
2018/08/30 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
一些.net面试题
2014/10/06 面试题
软件测试面试题
2014/01/05 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
施工工地安全标语
2014/06/07 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
慰问信格式
2015/02/14 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python