一,键盘

keydown 表示按下键盘

keypress 表示按下键盘

keyup 表示键盘弹起

这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面

先后顺序: 按照 keydown keypress keyup 顺序发生

键盘按钮值:

通过event对象的which属性获取键盘的值

keydown和keyup 能获取所有按键,不能识别大小写

keypress 不能获取功能键,如F1 SHIFT等,能够识别大小写

文本取值:

keydown和keypress:不能获取最后一个字符

keyup: 获取所有字符

<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
var order = 0;
var clearTimer=null;
$(function(){
$("#i").keydown(function(e){
var selector = "keydown"; show(selector,e,$(this).val());
}); $("#i").keypress(function(e){
var selector = "keypress";
show(selector,e,$(this).val());
}); $("#i").keyup(function(e){
var selector = "keyup";
show(selector,e,$(this).val());
}); }); function show(selector,e,inputvalue){
clearTimeout(clearTimer);
action(selector);
key(selector,e);
value(selector,inputvalue);
clearTimer= setTimeout(clear,4000);
} function action(selector){
$("#"+selector+"Action").css("background-color","green");
$("#"+selector+"Action").html("顺序: " + (++order ) );
} function value(selector,value){
$("#"+selector+"Value").html(value);
} function key(selector,e){
$("#"+selector+"Key").html(e.which);
} function clear(){
order = 0;
$("tr#action div").css("background-color","red");
$("tr div").html("");
} </script>
<style>
tr#action div{
border: 1px solid black;
height:50px;
background-color:red;
} tr#value div,tr#key div{ height:50px;
background-color:#d1d1d1;
} td{
width:25%;
}
</style>
输入框:<input id="i">
<table width="100%">
<tr>
<td></td>
<td>keydown</td>
<td>keypress</td>
<td>keyup</td>
</tr>
<tr id="action">
<td>行为</td>
<td><div id="keydownAction"></div></td>
<td><div id="keypressAction"></div></td></td>
<td><div id="keyupAction"></div></td></td>
</tr> <tr id="key">
<td>按键</td>
<td><div id="keydownKey"></div></td></td>
<td><div id="keypressKey"></div></td></td>
<td><div id="keyupKey"></div></td></td>
</tr> <tr id="value">
<td>取值</td>
<td><div id="keydownValue"></div></td></td>
<td><div id="keypressValue"></div></td></td>
<td><div id="keyupValue"></div></td></td>
</tr> </table>

敲入ab

发生的先收顺序是 keydown,keypress,keyup

keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.

keydown和keypress只能取到文本值a, keyup可以取到ab。

二,鼠标

mousedown 表示鼠标按下

mouseup表示鼠标弹起

mousemove表示鼠标进入

mouseenter表示鼠标进入

mouseover表示鼠标进入

mouseleave表示鼠标离开

mouseout表示鼠标离开

<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
$(function(){
$("#downup").mousedown(function(){
$(this).html("鼠标按下");
});
$("#downup").mouseup(function(){
$(this).html("鼠标弹起");
});
var moveNumber =0;
var enterNumber =0;
var leaveNumber =0;
var overNumber =0;
var outNumber =0; var enterNumber1 =0;
var overNumber1 =0; var leaveNumber1 =0;
var outNumber1 =0; $("#move").mousemove(function(){
$("#move span.number" ).html(++moveNumber);
});
$("#enter").mouseenter(function(){
$("#enter span.number" ).html(++enterNumber);
});
$("#leave").mouseleave(function(){
$("#leave span.number" ).html(++leaveNumber);
});
$("#over").mouseover(function(){
$("#over span.number" ).html(++overNumber);
});
$("#out").mouseout(function(){
$("#out span.number" ).html(++outNumber);
}); $("#enter1").mouseenter(function(){
$("#enter1 span.number" ).html(++enterNumber1);
});
$("#over1").mouseover(function(){
$("#over1 span.number" ).html(++overNumber1);
}); $("#leave1").mouseleave(function(){
$("#leave1 span.number" ).html(++leaveNumber1);
}); $("#out1").mouseout(function(){
$("#out1 span.number" ).html(++outNumber1);
}); }); </script> <style>
div{
background-color:pink;
margin:20px;
padding:10px;
} .subDiv{
background-color:green;
margin:10px;
} .parentDiv{
background-color:pink;
height:80px;
} table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td{
border: 1.5px solid #d1d1d1;
vertical-align:top;
padding:20 0;
} </style>
<table >
<tr>
<td width="100px">事件</td>
<td>效果演示</td>
</tr>
<tr>
<td>mousedown <br />
mouseup<br /></td>
<td>
<button id="downup" style="margin-left:20px">鼠标按下弹起测试</button> </td>
</tr>
<tr>
<td>mousemove<br />
mouseenter<br />
mouseover<br />
mouseleave<br />
mouseout</td>
<td>
<div id="move">mousemove 当鼠标进入元素,每移动一下都会被调用 次数<span class="number">0</span></div>
<div id="enter">mouseenter 当鼠标进入元素,调用一下,在其中移动,不调用 次数<span class="number">0</span></div>
<div id="over">mouseover 当鼠标进入元素,调用一下,在其中移动,不调用 次数<span class="number">0</span></div>
<div id="leave">mouseleave 当鼠标离开元素,调用一下 次数<span class="number">0</span></div>
<div id="out">mouseout 当鼠标离开元素,调用一下 <span class="number">0</span></div> </tr>
<tr>
<td>mouseenter<br />
mouseover</td>
<td> <div id="enter1" class="parentDiv">
mouseenter 经过其子元素不会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div>
</div> <div id="over1" class="parentDiv">
mouseover 经过其子元素会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div>
</div> </td>
</tr>
<tr>
<td>mouseleave<br />
mouseout </td>
<td>
<div id="leave1" class="parentDiv">
mouseleave 经过其子元素不会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div>
</div> <div id="out1" class="parentDiv"> mouseout 经过其子元素会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div>
</div> </td>
</tr>
</table>

三,焦点

focus() 获取焦点

blur() 失去焦点

<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
$(function(){
$("input").focus(function(){
$(this).val("获取了焦点");
}); $("input").blur(function(){
$(this).val("失去了焦点");
}); }); </script> <style> </style> <input type="text" > <input type="text" >

【JS】键盘鼠标事件的更多相关文章

  1. Android查询:模拟键盘鼠标事件(adb shell 实现)

    1. 发送键盘事件: 命令格式1:adb shell input keyevent “value” 其中value以及对应的key code如下表所列: KeyEvent Value KEYCODE ...

  2. 【pyHook】 监测键盘鼠标事件等

    [pyHook] pyHook是一个用来进行键盘.鼠标等层面事件监控的库.这个库的正常工作需要pythoncom等操作系统的API的支持.首先来说说如何安装. 直接pip install pyHook ...

  3. js的鼠标事件整理-------Day47

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/34202437 今天回来的有些晚了,实在是 ...

  4. soeasy的键盘鼠标事件

    在web自动化中,我们可能会遇到需要通过键盘或者鼠标去操作某些元素,那么我们就需要用到键盘事件和鼠标事件了,今天对键盘和鼠标操作进行一个总结 鼠标事件 鼠标事件需要引入ActionChains类,查看 ...

  5. vue.js 键盘enter事件的使用

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -- ...

  6. (转)C#模拟键盘鼠标事件

    原文 1.模拟键盘事件System.Windows.Forms.SendKeys以下是   SendKeys   的一些特殊键代码表.     键   代码       BACKSPACE   {BA ...

  7. linux 处理键盘 鼠标事件

    Linux下鼠标和键盘的模拟控制,也就是为手势和语音控制鼠标和键盘部分服务的. 有关于本系统构建的文章结构都会由三个部分来组织,一是该功能模块的介绍和在Linux下简单应用程序的实现:二是将该功能模块 ...

  8. js event鼠标事件

    1,鼠标焦点事件 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  9. js基础 -----鼠标事件(按下 拖拽)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. pwnable.kr-random

    题目 首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数,下面将详细说明. rand(产生随机数) 表头文件: #include 定义函数 :int ...

  2. IOS Core Animation Advanced Techniques的学习笔记(二)

    - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx { CGFloat width = 10.0f; //draw a thi ...

  3. ubuntu ulimit 设置

    永久设置ubuntu ulimit 之前是ulimit -n 65535那样设置,不过貌似只是当前环境有效果,重启服务器的话,又失效了...今天无意找到一个设置的方法,可以永久设置ulimit的参数. ...

  4. 使用Javascript中变量的setter属性

    在讲JDK的动态代理方法之前,不妨先想想如果让你来实现一个可以任意类的任意方法的代理类,该怎么实现?有个很naive的做法,通过反射获得Class和Method,再调用该方法,并且实现一些代理的方法. ...

  5. centos下搭建lamp环境

    1 在线安装所有的服务 yum -y install httpd mysql mysql-server php php-mysql postgresql postgresql-server php-p ...

  6. git上传项目代码到github

    参考: git学习——上传项目代码到github github上传时出现error: src refspec master does not match any解决办法 git 上传本地文件到gith ...

  7. 通过js对cookie的使用手册

    一般大多数人还是用引用JQuary API——jquery.cookie.js,来操作cookie.这是一种很不错的方式,我也支持这样的做法. 但是有时候我们只需要一种极为轻量级的代码来实现简单的功能 ...

  8. 关于sql 2005 版本问题

    win7可以安装:标准版  其他的都安装不了 win2003 2008 :可以安装任何版本

  9. 在linux使用make编译ArduPilot for Pixhawk/PX4 ArduPilot 编译环境搭建

    Building ArduPilot for Pixhawk/PX4 on Linux with Make 使用Make编译 ArduPilot for Pixhawk 2, Pixhawk and ...

  10. [Linux学习]Shell脚本(1)--函数,输入,if判断(持续更新)+删除空行 +保存当前路径

    1)接收输入 check_status() { echo --Check hi_repo status is ok? y or n read var if [ "$var" != ...