【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" >