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 设置标题的自动翻转
Oct 03 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 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
基于文本的访客签到簿
2006/10/09 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python中用于计算对数的log()方法
2015/05/15 Python
Python合并字符串的3种方法
2015/05/21 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
学习python分支结构
2019/05/17 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
如何使用PHP session
2015/04/21 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
Shell如何接收变量输入
2016/08/06 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
医生进修自我鉴定
2014/01/19 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang