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>
 

js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  3. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  4. C# WPF 中用代码模拟鼠标和键盘的操作

    原文:C# WPF 中用代码模拟鼠标和键盘的操作 原文地址 C#开发者都知道,在Winform开发中,SendKeys类提供的方法是很实用的.但是可惜的是,在WPF中不能使用这个方法了. 我们知道,在 ...

  5. 自动化测试-22.RobotFrameWork鼠标和键盘的操作针对出现window界面的处理

    键盘和鼠标的操作:使用AutoItLibrary模块 1.安装pywin32 http://sourceforge.net/projects/pywin32/files/pywin32/Build%2 ...

  6. python + selenium webdriver 通过python来模拟鼠标、键盘操作,来解决SWFFileUpload调用系统底层弹出框无法定位问题

    Webdriver是基于浏览器操作的,当页面上传文件使用的是flash的控件SWFFileUpload调用的时候,调用的是系统底层的文件选择弹出框 这种情况,Webdriver暂时是不支持除页面外的其 ...

  7. selenium基础(鼠标和键盘事件)

    selenium鼠标和键盘的操作事件 webdriver常见的几种操作方法 clear():清楚文本文字 send_keys(values):模拟按键输入,values是输入的内容 click():单 ...

  8. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  9. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

随机推荐

  1. ZOJ 3674 Search in the Wiki(字典树 + map + vector)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4917 题意:每一个单词都一些tips单词. 先输入n个单词和他们的t ...

  2. 亚马逊AWS的route53的收费,月费最低 0.9 USD

    亚马逊AWS的route53的收费Amazon Route 53 定价 https://aws.amazon.com/cn/route53/pricing/ 一文中,对于一些术语的解释第一项收费--域 ...

  3. fragment-实例创建跟使用

    今天接触到了fragment,在网上看到了它的使用方法.现在把它的创建跟使用记录下,方便以后查询. 1.创建一个自己的fragment,继承自fragment package com.android. ...

  4. goinstall

    [背景] 折腾: [记录]go语言中通过log4go实现同时输出log信息到log文件和console 期间,以: http://code.google.com/p/log4go/ 为例,如何安装第三 ...

  5. POJ 1874 畅通工程续(最短路模板题)

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  6. JXNU 新生选拔赛

    1001 最小的数 Problem Description 定义一种正整数集合K,集合中有N个数,集合中元素Ki(1<=i<=N)是包含i个不同质因子的最小的数.因为Ki可能会很大,所以将 ...

  7. mysql 实行模糊查询 一个输入值匹配多个字段和多个输入值匹配一个字段

    mysql 实行模糊查询  一个输入值匹配多个字段 MySQL单表多字段模糊查询可以通过下面这个SQL查询实现 为啥一定要150字以上  真的麻烦  还不让贴代码了 SELECT * FROM `ma ...

  8. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  9. Behavioral模式之Visitor模式

    1.意图 表示一个作用于某对象结构中的各元素的操作.它使你能够在不改变各元素的类的前提下定义作用于这些元素的新操作. 2.别名 无 3.动机 考虑一个编译器.他将源程序表示为一个抽象语法树.该编译器须 ...

  10. 看好腾讯,鄙视百度(腾讯的核心竞争力,不是超过10亿的QQ的注册用户,也不是某一项产品、技术方面优势,而是“耐心”:懂得在合适的时间推出合适的产品。”)

    百度,自始至终只是一个低劣的模仿者,且一切向前看,完全违背了一个搜索引擎所应该遵循的基本原则.谁给的钱多就能搜着谁,这跟贩毒有什么区别? 腾讯也在模仿别人,但是,它是模仿然后超越.在中国互联网发展历史 ...