Atitit.js的键盘按键事件捆绑and事件调度


Posted in Javascript onApril 01, 2016

 1. Best的方法还是

objEvtMap[ id+evt ]=function(evt,element)

2. Event bind

function bindEvent_4_dataBlock()
{
var arr=$("#table1 li");
arr.each(function(index, element) {
$(element).keypress(function(){
alert('keypress');
});
var id="data_aid_"+index;
$(element).attr("id","data_aid_"+index);
objEvtMap[ id ]=function(evt,element)
{
if(evt=="down")
key_press_hadler($(element));
if(evt=="up")
key_press_hadler4up($(element));
if(evt=="left")
{};
if(evt=="rit")
{}
};
});
}

3. Event dispatch

document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
alert("keycode:"+e.keyCode);
if(e && e.keyCode==40 ){//下
//alert('40=下键,39=右键');
var now=$(".selected");
var id=$(now).attr("id");
var func=objEvtMap[id ];
func("down",now);
//key_press_hadler(now);
return false;
}

js中获取键盘事件

<script type="text/javascript" language=JavaScript charset="UTF-">
document.onkeydown=function(event){
var e = event || window.event || arguments.callee.caller.arguments[];
if(e && e.keyCode==){ // 按 Esc 
//要做的事情
}
if(e && e.keyCode==){ // 按 F 
//要做的事情
} 
if(e && e.keyCode==){ // enter 键
//要做的事情
}
}; 
</script>

只要你定义了这些键的动作,你在浏览器里按下这些键就会响应,兼容目前所有浏览器。

js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:

keyCode = BackSpace BackSpace
keyCode = Tab Tab
keyCode = Clear
keyCode = Enter
keyCode = Shift_L
keyCode = Control_L
keyCode = Alt_L
keyCode = Pause
keyCode = Caps_Lock
keyCode = Escape Escape
keyCode = space
keyCode = Prior
keyCode = Next
keyCode = End
keyCode = Home
keyCode = Left
keyCode = Up
keyCode = Right
keyCode = Down
keyCode = Select
keyCode = Print
keyCode = Execute
keyCode = Insert
keyCode = Delete
keyCode = Help
keyCode = equal braceright
keyCode = exclam onesuperior
keyCode = quotedbl twosuperior
keyCode = section threesuperior
keyCode = dollar
keyCode = percent
keyCode = ampersand
keyCode = slash braceleft
keyCode = parenleft bracketleft
keyCode = parenright bracketright
keyCode = a A
keyCode = b B
keyCode = c C
keyCode = d D
keyCode = e E EuroSign
keyCode = f F
keyCode = g G
keyCode = h H
keyCode = i I
keyCode = j J
keyCode = k K
keyCode = l L
keyCode = m M mu
keyCode = n N
keyCode = o O
keyCode = p P
keyCode = q Q at
keyCode = r R
keyCode = s S
keyCode = t T
keyCode = u U
keyCode = v V
keyCode = w W
keyCode = x X
keyCode = y Y
keyCode = z Z
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_ KP_
keyCode = KP_Multiply KP_Multiply
keyCode = KP_Add KP_Add
keyCode = KP_Separator KP_Separator
keyCode = KP_Subtract KP_Subtract
keyCode = KP_Decimal KP_Decimal
keyCode = KP_Divide KP_Divide
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = F
keyCode = Num_Lock
keyCode = Scroll_Lock
keyCode = acute grave
keyCode = comma semicolon
keyCode = minus underscore
keyCode = period colon
keyCode = numbersign apostrophe
keyCode = plusminus hyphen macron
keyCode =
keyCode = copyright registered
keyCode = guillemotleft guillemotright
keyCode = masculine ordfeminine
keyCode = ae AE
keyCode = cent yen
keyCode = questiondown exclamdown
keyCode = onequarter onehalf threequarters
keyCode = less greater bar
keyCode = plus asterisk asciitilde
keyCode = multiply division
keyCode = acircumflex Acircumflex
keyCode = ecircumflex Ecircumflex
keyCode = icircumflex Icircumflex
keyCode = ocircumflex Ocircumflex
keyCode = ucircumflex Ucircumflex
keyCode = ntilde Ntilde
keyCode = yacute Yacute
keyCode = oslash Ooblique
keyCode = aring Aring
keyCode = ccedilla Ccedilla
keyCode = thorn THORN
keyCode = eth ETH
keyCode = diaeresis cedilla currency
keyCode = agrave Agrave atilde Atilde
keyCode = egrave Egrave
keyCode = igrave Igrave
keyCode = ograve Ograve otilde Otilde
keyCode = ugrave Ugrave
keyCode = adiaeresis Adiaeresis
keyCode = ediaeresis Ediaeresis
keyCode = idiaeresis Idiaeresis
keyCode = odiaeresis Odiaeresis
keyCode = udiaeresis Udiaeresis
keyCode = ssharp question backslash
keyCode = asciicircum degree
keyCode = sterling
keyCode = Mode_switch

使用event对象的keyCode属性判断输入的键值

eg:if(event.keyCode==)alert(“enter!”);

键值对应表

AX  U 
X
B
X  V
 X
C
X  W
 X
D
X  X 
X
E
X  Y
 X
F
X  Z
 X
G
X  
 X
H
X  
 X
I
X  
 X
J
X  
X
K
X  
X
L
X  
X
M
X  
 X
N
X   
X
O
X   
X
P
X   
X
Q
X ESC
XB
R
X CTRL  X
S
X SHIFT X
T
X ENTER XD

如果要使用组合键,则可以判断是否同时按下了这几个键,比如ctrl键、shift键以及alt键的组合使用就可以判断是否多按下了ctrl键、shift键以及alt键

Javascript 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 #Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 #Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 #Javascript
基于jquery实现轮播焦点图插件
Mar 31 #Javascript
javascript中错误使用var造成undefined
Mar 31 #Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 #Javascript
js表单验证实例讲解
Mar 31 #Javascript
You might like
详解js异步文件加载器
2016/01/24 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
Javascript BOM学习小结(六)
2015/11/26 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
python实现dict版图遍历示例
2014/02/19 Python
python3访问sina首页中文的处理方法
2014/02/24 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python实现飞行棋游戏
2020/02/05 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
医学院四年学习生活的自我评价
2013/11/06 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
总经理工作职责范文
2014/03/14 职场文书
操行评语大全
2014/04/30 职场文书
小学课外阅读总结
2014/07/09 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
校园广播稿范文
2015/08/19 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android