【JS】键盘鼠标事件

2022-11-11 12:28:21

一，键盘

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

码农公寓

相关文章