首页 > 代码库 > 【JS】键盘鼠标事件

【JS】键盘鼠标事件

2024-08-17 03:50:27   220人阅读

一，键盘

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】键盘鼠标事件


联系
我们