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鼠标、键盘事件实例代码
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"> var isPiss=0; document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27
-
js监听键盘事件的方法_原生和jquery的区别详解
经常需要监听键盘的事件,以便做更好的操作,基本原理是:监听全局键盘,每一个键盘,当用户按下某一按键时,返回对应的键值,然后再判断用户按下了哪一科按键,键值对应按键的名称在最下面列出,自行比对.去以下介绍两种不同的方式 原生键盘监听事件:按下一次按键,分为三个过程,按下-按住-松开 onkeydown:某个键被按下 onkeypress:某个键盘的键被按下或按住 onkeyup:某个键盘的键被松开 使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上 以下是原生的
-
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捕捉键盘事件和按键键值的方法
如下所示: <!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
-
js和jquery实现监听键盘事件示例代码
项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
-
浅谈js键盘事件全面控制
主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypr
-
js键盘事件的keyCode
document.onkeyup = function(event){ var event = event || window.event; alert(event.keyCode); }
-
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(
-
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
随机推荐
- Windows下通过bat获取网络连线实际名称,加强IP类设置脚本的兼容性
- 实例讲解jQuery EasyUI tree中state属性慎用
- Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
- vue用addRoutes实现动态路由的示例
- 理解JavaScript原型链
- [Oracle] RAC 之 - 负载均衡深入解析
- Visual studio 2017添加引用时报错未能正确加载ReferenceManagerPackage包的解决方法
- 自定义一个theme在不同的sdk环境下继承不同的值
- js css实现垂直方向自适应的三角提示菜单
- javascript计算星座属相(十二生肖属相)示例代码
- 注册表的禁用与解锁方法集合
- JavaScript入门之语言基础第1/2页
- Js放到HTML文件中的哪个位置有什么区别
- 比较简单实用的WEB安全设置总结
- 网络基础学习之十九路由器的硬件连接
- javascript+dom树型菜单类,希望朋友们一起进步
- Android studio编写简单的手电筒APP
- Python与C++ 遍历文件夹下的所有图片实现代码
- 关于python多重赋值的小问题
- 一条命令让你明白shell中read命令的常用参数
