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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
详解vue axios中文文档
Sep 12 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 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 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
javascript常用函数(2)
2015/11/05 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
浅析vue深复制
2018/01/29 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
深入理解NumPy简明教程---数组2
2016/12/17 Python
浅析python的Lambda表达式
2019/02/27 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
简单说说tomcat的配置
2013/05/28 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
经典商业广告词
2014/03/13 职场文书
财产公证书格式
2014/04/10 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
法制宣传月活动总结
2014/04/29 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
2016年国培研修日志
2015/11/13 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技