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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
js简单实现交换Li的值
May 22 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
vuejs如何配置less
Apr 25 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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/11/16 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
Python实现按中文排序的方法示例
2018/04/25 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
客户接待方案
2014/02/26 职场文书
刑事附带民事代理词
2015/05/25 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server