jQuery Event.which 属性详解

jQuery Event.which 属性详解

which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮

对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。

which属性对DOM原生的event.keyCodeevent.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>‘);    }});
时间: 2024-10-26 13:09:06

jQuery Event.which 属性详解的相关文章

jQuery Event.delegateTarget 属性详解

// 为id为element的元素中的所有span元素绑定click事件 $("#element").on( "click", "span", function(event){ // event.delegateTarget 就是id为element的DOM元素 // this 就是当前触发事件的span元素 alert( event.delegateTarget === this); // false } ); // 为id为element的元

javascript事件之:jQuery.event.add事件详解

我们已经了解过jQuery.event下的方法,回顾一下 jQuery.event = { global: {}, add: function( elem, types, handler, data, selector ) {}, remove: function( elem, types, handler, selector, mappedTypes ) {}, trigger: function( event, data, elem, onlyHandlers ) {}, dispatch:

javascript事件之:jQuery.event.remove事件详解

之前已经介绍过jQuery.event.add,现在我们来看看jQuery.event.remove 先上代码 /* elem: 处理的元素 types: 移除的事件 handler: 移除的方法 selector: 委托的元素 mappedTypes: */ remove: function( elem, types, handler, selector, mappedTypes ) { var j, origCount, tmp, events, t, handleObj, special,

jQuery Event.stopImmediatePropagation() 函数详解

stopImmediatePropagation()函数用于阻止剩余的事件处理函数的执行,并防止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数,就会触发执行这些函数. 使用stopImmediatePropagation()函数可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数. 此外,与event.stopPropagation()

jQuery Event.stopPropagation() 函数详解

stopPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函数,就会触发执行这些函数. 使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递,也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数. 该函数只阻止事件向祖辈元素的传播,不会阻止该元素自身绑定的其他事件处理函数的函数.event.stopImmediateP

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

触碰jQuery:AJAX异步详解(转)

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请

jQuery Validate验证框架详解

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src

基于jQuery的TreeGrid组件详解

一.TreeGrid组件相关的类 1.TreeGrid(_config) _config:json格式的数据,组件所需要的数据都通过该参数提供. 2.TreeGridItem(_root, _rowId, _rowIndex, _rowData) _root:显示组件实例的目标容器对象. _rowId:选中行的id. _rowIndex:选中行的索引. _rowData:json格式的行数据. 二._config参数详解 id:组件实例的id. width:组件实例的宽度. renderTo:用