"JS" Keyboard Mouse Events

one, keyboard

KeyDown means pressing the keyboard

KeyPress means pressing the keyboard

KeyUp means that the keyboard bounces up

The difference between the three are shown in the order of occurrence, get the keyboard button value, the text of the input box has been the value of these three aspects

Sequence: according to KeyDown keypress KeyUp sequence occurs

Keyboard button Values:

Get the value of the keyboard through the which property of the event object

KeyDown and KeyUp can get all keys, not case-sensitive

KeyPress cannot get function keys, such as F1 shift etc., to be able to identify the case

Text value:

KeyDown and Keypress: cannot get last character

Keyup: Get all characters

<script src= "http://how2j.cn/study/jquery.min.js" ></script> <script>varOrder = 0;varCleartimer=NULL;$(function(){  $("#i"). KeyDown (function(e) {varselector = "keydown"; Show (selector,e,$ ( this). Val ());    }); $("#i"). KeyPress (function(e) {varselector = "keypress"; Show (selector,e,$ ( this). Val ());    }); $("#i"). KeyUp (function(e) {varselector = "keyup"; Show (selector,e,$ ( this). Val ());    });  }); functionShow (selector,e,inputvalue) {cleartimeout (cleartimer);     Action (selector);     Key (selector,e);     Value (selector,inputvalue); Cleartimer= SetTimeout (clear,4000);} functionAction (selector) {$ ("#" +selector+ "Action"). CSS ("background-color", "green"); $("#" +selector+ "Action"). HTML ("order:" + (+ +)order));} functionvalue (selector,value) {$ ("#" +selector+ "Value"). HTML (value);} functionkey (selector,e) {$ ("#" +selector+ "Key"). HTML (e.which);} functionClear () {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 box: <input id= "i" > <table width= "100%" ><tr> <td></td> <td>keydown </td> <td>keypress</td> <td>keyup</td></tr><tr id= "action" > <td> behavior </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> key </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> value </td> <td ><div id= "keydownvalue" ></div></td></td> <td><div id= "keypressvalue" ></ div></td></td> <td><div id= "keyupvalue" ></div></td></td></tr> </table> 

Typing AB

The first order of occurrence is Keydown,keypress,keyup

KeyDown and KeyUp take the ASCII code table of uppercase B 66,keypress to the ASCII Code table 98 of Lowercase B.

KeyDown and KeyPress can only take the text value a, KeyUp can be taken to AB.

two, the mouse

MouseDown indicates that the mouse is pressed

MouseUp means the mouse bounces up

MouseMove indicates mouse entry

MouseEnter indicates mouse entry

MouseOver indicates mouse entry

MouseLeave indicates that the mouse left

Mouseout indicates that the mouse left

<script src= "http://how2j.cn/study/jquery.min.js" ></script> <script>$(function(){$("#downup"). MouseDown (function(){   $( this). HTML ("mouse down");}); $("#downup"). MouseUp (function(){   $( this). HTML ("mouse bounce");});varMovenumber =0;varEnternumber =0;varLeavenumber =0;varOvernumber =0;varOutnumber =0; varEnterNumber1 =0;varOverNumber1 =0; varLeaveNumber1 =0;varOutNumber1 =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" > Events </td> <td> effect Demo </td> </tr&gt  ;  <tr> <td>mousedown <br/> mouseup<br/></td> <td> <button id= "downup" style= "margin-left:20px" > Mouse click to Bounce Test </button> </td> </tr> <tr> <td>mousemove<br /> mouseenter<br/> mouseover<br/> mouseleave<br/> mouseout</td> <td&        Gt <div id= "move" >mousemove When the mouse enters the element, each move will be called <span class= "number" >0</span></div> <div I d= "enter" >mouseenter When the mouse enters the element, invokes it, moves in it, does not call <span class= "number" >0</span></div> <div id= " Over ">mouseover when the mouse enters the element, invokes it, moves in it, does not call <span class=" number ">0</span></div> <div id=" leave ">mouseleave when the mouse leaves the element, call <span class=" number ">0</span></div> <div id=" out ">mouseout When the mouse leaves the element, call <Span class= "number" >0</span></div> </tr> <tr> <td>mouseenter<br/> mouseove r</td> <td> <div id= "enter1" class= "parentdiv" >MouseEnter the number of times a child element is not called<span class= "number" >0</span> <div class= "subdiv" >div sub-elements </div> </div> <div id= "over1" class= "parentdiv" >the number of times the mouseover will be called after its child elements<span class= "number" >0</span> <div class= "subdiv" >div sub-elements </div> </div>    </td> </tr> <tr> <td>mouseleave<br/> mouseout </td> <td> <div id= "leave1" class= "parentdiv" >MouseLeave the number of times a child element is not called<span class= "number" >0</span> <div class= "subdiv" >div sub-elements </div> </div> <div id= "out1" class= "parentdiv" >the number of times the mouseout will be called after its child elements<span class= "number" >0</span> <div class= "subdiv" >div sub-elements </div> </div> </td> </tr></table>

three, Focus

Focus () Get focused

Blur () loses focus

<script src= "http://how2j.cn/study/jquery.min.js" ></script> <script>$ (function  () {$ ("input"). focus (function() {    $ (this). val ("get focus");});    $ ("input"). blur (function() {    $ (this). val ("lost focus" </script >   <style> </style> <input type= "text" > <input type= "text" >

"JS" Keyboard Mouse Events