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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
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代码
2013/03/24 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
javascript读取xml
2006/11/04 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python多线程操作实例
2014/11/21 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python实现自动整理文件的脚本
2020/12/17 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
法律进社区实施方案
2014/03/21 职场文书
教师产假请假条范文
2014/04/10 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
高一军训决心书
2015/02/05 职场文书
2016新年慰问信范文
2015/03/25 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python