jQuery Event.which 属性详解
jQuery Event.which 属性详解
which
属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。
对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。
which
属性对DOM原生的event.keyCode
和event.charCode
进行了标准化。
适用的事件类型主要有键盘事件:keypress、keydown、keyup,以及鼠标事件:mouseup、mousedown。
该属性属于jQuery的Event
对象(实例)。
语法
jQuery 1.1.3 新增该属性。
eventObject.which
返回值
which
属性的返回值是Number类型,返回触发当前事件时按下的键盘按键或鼠标按钮。
在mousedown、mouseup事件中,event.which
属性返回的是对应鼠标按钮的映射代码值(相当于event.button
)。以下是主要的鼠标按钮映射代码对应表。
event.which属性值 | 对应的鼠标按钮 |
---|---|
1 | 鼠标左键 |
2 | 鼠标中键(滚轮键) |
3 | 鼠标右键 |
在keypress事件中,event.which
属性返回的是输入的字符的Unicode值(相当于event.charCode
)。以下是常用的字符Unicode代码对应表。更多字符的Unicode代码,请参见完整的ASCII编码表(Unicode兼容ASCII)。
which属性值(或范围) | 对应的输入字符 |
---|---|
48 - 57 | 对应字符 0 - 9 |
65 - 90 | 对应字符 A - Z |
97 - 122 | 对应字符 a - z |
在keydown、keyup事件中,event.which
属性返回的是对应按键的映射代码值(相当于event.keyCode
)。以下是常用的键盘按键映射代码的对应表:
which属性值(或范围) | 对应的键盘按键 |
---|---|
8 | Backspace键 |
9 | Tab键 |
13 | Enter键 |
16 | Shift键 |
17 | Ctrl键 |
20 | Alt键 |
20 | Caps Lock键(大小写锁定) |
27 | Esc键 |
33 - 36 | 对应按键 PageUp、PageDown、End、Home |
37 - 40 | 对应按键 左、上、右、下(方向键) |
45 - 46 | 对应按键 Insert、Delete |
48 - 57 | 对应按键 0 - 9(非小键盘) |
65 - 90 | 对应按键 A - Z |
91 | Windows键 |
96 - 105 | 对应按键 0 - 9(小键盘) |
106、107、109、110、111 | 对应按键*、+、-、.、/(小键盘) |
112 - 123 | 对应按键 F1 - F12 |
示例&说明
请参考下面这段HTML代码:
<div id="msg"></div>
与event.which
属性相关的jQuery示例代码如下(其中表单验证部分的代码仅作简单的非空验证):
// 为当前文档绑定keydown和mousedown两种事件
// 检测鼠标按下了那些键
// 检测键盘按下了那些字母按键
$(document).bind("keydown mousedown", function(event){
var msg = '';
if( event.type == "mousedown" ){ // 鼠标按下事件
var map = {"1": "左", "2":"中", "3":"右"};
msg = '你按下了鼠标[' + map[event.which] + ']键';
}else{ // 键盘按下事件
if(event.which >= 65 && event.which <= 90){
msg = '你按下了键盘[' + String.fromCharCode(event.which) + ']键';
}
}
if(msg){
$("#msg").prepend( msg + '<br>');
}
});
jQuery Event.which 属性详解的更多相关文章
- jQuery Event.delegateTarget 属性详解
// 为id为element的元素中的所有span元素绑定click事件 $("#element").on( "click", "span" ...
- jQuery Event.stopPropagation() 函数详解
stopPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函 ...
- jQuery Event.stopImmediatePropagation() 函数详解
stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈 ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- EditText属性详解
关于EditText属性详解很详细的记录,转过来收着 1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password=" ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
随机推荐
- python开发_copy(浅拷贝|深拷贝)_博主推荐
在python中,有着深拷贝和浅拷贝,即copy模块 下面我们就来聊一下: 运行效果: ================================================== 代码部分: ...
- 探究react-native 源码的图片缓存
先看js端图片使用的三种方式,依次排序1.2.3 <Image source={{uri:url}} style={{width:200,height:200}}/> 1. 加载远程图片 ...
- Level-shifting nixes need for dual power supply
The AD736 true-rms-to-dcconverter is useful for many applications that require precise calculation o ...
- 2016.3 idea 注册码
idea 最新官方版本:2016.3 idea 注册码 1.下载最新idea 下载地址:https://www.jetbrains.com/idea/ 2.安装 Windows 直接下载 .exe 文 ...
- JavaScript如何获取/计算页面元素的offset?
问题 通过点击一控件,在控件的下面显示一个浮动层,通常的做法是:获取此控件的offset值,再计算出浮动层的top,left等css属性的值,赋值即可. 那么下面就看一下如何获取控件的offset值 ...
- Linux下OOM Killer机制详解
http://www.cnblogs.com/ylqmf/archive/2012/11/05/2754795.html http://wuquan-1230.blog.163.com/blog/st ...
- [Asp.net]使用flexpaper+swftools大文件分页转换实现在线预览
引言 之前总结了在线预览几种常见解决方案,可以戳这里: http://www.cnblogs.com/wolf-sun/p/3569960.html http://www.cnblogs.com/wo ...
- Java:volatile 关键字的一点理解
背景 学了六年C#,一直没有使用过 volatile,对多线程编程也是偶尔才会使用,这次学习 Java 又遇到了 volatile,准备稍微深入的了解一下. volatile 的作用? 几乎所有支持这 ...
- FAQ:如何修改领域模型?
问答部分 问: 如何修改领域模型? 答: 一般来说我们有两种选择,这两种选择也是两种价值观的体现(乐观和悲观). 第一种:使用UI传递过来的DTO在应用层重建Domain Model,然后执行修改,D ...
- easyui 后台页面,在Tab中的链接点击后添加一个新TAB的解决方法
1.示例1 新增一个按钮 添加点击事件 onclick="self.parent.addTab('百度','http://www.baidu.com','icon-add')" 如 ...