js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键
一、总结
一句话总结：event.which属性。
1、如何获取事件发生的时间？
timeStamp属性
event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。
2、为什么推荐用 event.which 来监视键盘输入？
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
3、鼠标的三个键对应的键值是什么？
1 2 3
| event.which属性值 | 对应的鼠标按钮 | 1 | 鼠标左键 | 2 | 鼠标中键(滚轮键) | 3 | 鼠标右键 |
|---|
4、0-9a-zA-Z对应的键值是什么？
他们对应的ascii码
5、非jQuery封装获取ctrl，alt，shift的键是什么？
35 //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装)
36 $(document).mousedown(function(e){
37 alert(e.shiftKey)
38 })
6、jquery的event对象中包含js的event的原生的方法么？
包含的，只不过对有一些进行了封装，因为jquery里面是完全可以执行js的，所以js原生方法属性都可以用
二、如何知道鼠标和键盘当前操作的是哪个键
1、相关知识
event.timeStamp 属性用于返回当前事件触发的时间值。这个时间值是距离1970年1月1日的毫秒数。
event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
在mousedownmouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值(相当于event.button)。以下是主要的鼠标按钮映射代码对应表。
| event.which属性值 | 对应的鼠标按钮 |
|---|---|
| 1 | 鼠标左键 |
| 2 | 鼠标中键(滚轮键) |
| 3 | 鼠标右键 |
在keydownkeyup事件中，event.which属性返回的是对应按键的映射代码值(相当于event.keyCode)。以下是常用的键盘按键映射代码的对应表：
| which属性值(或范围) | 对应的输入字符 |
|---|---|
| 48 - 57 | 对应字符 0 - 9 |
| 65 - 90 | 对应字符 A - Z |
| 97 - 122 | 对应字符 a - z |
| 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 |
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 100px;height: 100px;border:1px solid green;}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<div id="div1"><p id="pid"></p></div>
<input id="btn1" type="button" value="事件对象">
<script type="text/javascript">
$(function(){
$(document).click(function(e){
alert(e.timeStamp)
var time=new Date(e.timeStamp)
alert(time.toLocaleString())
}) $(document).mousedown(function(e){
alert(e.which)
}) $(document).keydown(function(e){
alert(e.which)
}) //回顾一下altKey/shiftKey/ctrlKey(非jQuery封装)
$(document).mousedown(function(e){
alert(e.shiftKey)
})
})
</script>
</body>
</html>
![[OpenCV-Python] 7 把鼠标当画笔](https://www.kunjuke.com/file/css/thumb/4.jpg/280-180.jpg)