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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
js中自定义react数据验证组件实例详解
Oct 19 Javascript
Vue项目路由刷新的实现代码
Apr 17 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类的封装与继承详解
2015/09/29 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
echart简介_动力节点Java学院整理
2017/08/11 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
一起深入理解js中的事件对象
2021/02/06 Javascript
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python如何安装第三方模块
2020/05/28 Python
python实现在线翻译
2020/06/18 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
网络工程师的自我评价
2013/10/02 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
监考失职检讨书
2015/01/26 职场文书
小学生运动会广播
2015/08/19 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
idea下配置tomcat避坑详解
2022/04/12 Servers