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