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 相关文章推荐
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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.ini 中文版
2006/10/28 PHP
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php的hash算法介绍
2014/02/13 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
财务会计人员岗位职责
2013/11/30 职场文书
个人自我评价范文
2014/02/05 职场文书
高校教师自荐信范文
2014/03/13 职场文书
社区食品安全实施方案
2014/03/28 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
整改落实自查报告
2014/11/05 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python