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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
Vue实现穿梭框效果
Sep 30 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP实现用户认证及管理完全源码
2007/03/11 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python实现不规则图形填充的思路
2020/02/02 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
家长给小学生的评语
2014/01/30 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
毕业设计致谢词
2015/05/14 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
导游词幽默开场白
2019/06/26 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS