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中获取事件对象的方法小结
Mar 13 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
javascript模块化简单解析
Apr 07 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
Node.js Express安装与使用教程
May 11 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
MYSQL环境变量设置方法
2007/01/15 PHP
php header示例代码(推荐)
2010/09/08 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
小程序自定义日历效果
2018/12/29 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
详解python多线程之间的同步(一)
2019/04/03 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
师范学院教师自荐书
2014/01/31 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
开学寄语大全
2014/04/08 职场文书
品牌服务方案
2014/06/03 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
感恩主题班会教案
2015/08/12 职场文书