JS键盘鼠标事件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS键盘鼠标事件相关的知识,希望对你有一定的参考价值。
一,键盘
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键盘鼠标事件的主要内容,如果未能解决你的问题,请参考以下文章