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
分别输入Shift、Ctrl、Alt功能键
连续按下字符a
连续按下Shift
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
js监听键盘事件示例代码
复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8"> var isPiss=0; document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27
-
浅谈js键盘事件全面控制
主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypr
-
js和jquery实现监听键盘事件示例代码
项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
-
javascript 键盘事件总结 推荐
在form中, submit的快捷键是 enter,reset的快捷键是 esc.不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit. 键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个ty
-
js键盘事件的keyCode
document.onkeyup = function(event){ var event = event || window.event; alert(event.keyCode); }
-
javascript键盘事件全面控制脚本代码
TD {text-align:center} function init() { document.onkeydown = showKeyDown document.onkeyup = showKeyUp document.onkeypress = showKeyPress } function showKeyDown(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").inne
-
js监听键盘事件的方法_原生和jquery的区别详解
经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的
-
js鼠标、键盘事件实例代码
1. 鼠标的哪个按键被点击? function whichButton(event) { if (event.button==2) { alert("你点击了鼠标右键!") } else { alert("你点击了鼠标左键!") } } 请单击你鼠标的左键或右键试试 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2. 当前鼠标的光标坐标是多少? function show_coords(event) { x=event.clientX y=event.
-
js中获取键盘事件的简单实现方法
<script type="text/javascript" language=JavaScript charset="UTF-8"> document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27){ // 按 Esc //要做的事情 } if(
-
js捕捉键盘事件和按键键值的方法
如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
随机推荐
- 详解如何使用webpack+es6开发angular1.x
- 结合Python的SimpleHTTPServer源码来解析socket通信
- SQLServer Job运行成功或失败时发送电子邮件通知的图文教程
- js loading加载效果实现代码
- Swift教程之闭包详解
- js前端实现图片懒加载(lazyload)的两种方式
- 全面解析PHP面向对象的三大特征
- Go语言实现简单Web服务器的方法
- 解读堆排序算法及用C++实现基于最大堆的堆排序示例
- webpack学习笔记之优化缓存、合并、懒加载
- VPS主机快速搬家方法:边打包边传输边解压适合大中型论坛网站
- android 如何判断当前是否为飞行模式
- 『jQuery』名称冲突使用noConflict方法解决
- 完美解决Eclipse 项目有红感叹号的问题
- 轻松掌握python设计模式之访问者模式
- 拥有网页版小U盘 ASP.NET实现文件上传与下载功能
- iOS多语言本地化流程的优化方案
- vue-cli webpack2项目打包优化分享
- 使用Jenkins Pipeline自动化构建发布Java项目的方法
- 详解用python写一个抽奖程序