JQuery keyUpとkeyDownの違いを深く理解する

定義と使用法の完全なkey pressプロセスは2つの部分に分けられる:1.キーが押される.2.キーが離されます.
ボタンが押されるとkeydownイベントが発生します.
keydown()メソッドは、keydownイベントをトリガーするか、keydownイベントが発生したときに実行される関数を規定します.

 
  
 
  
 
  
 
  
 
  <br>$(document).ready(function(){ 
  <br>  $("input").keydown(function(){ 
  <br>    $("input").css("background-color","#FFFFCC"); 
  <br>  }); 
  <br>  $("input").keyup(function(){ 
  <br>    $("input").css("background-color","#D6D6FF"); 
  <br>  }); 
  <br>}); 
  <br> 
  
 
  
 
  
Enter your name:  
  
    keydown   keyup    ，        。          。
 
  
 
  
 
  
 
 

よく知られているように,jqueryは多くのイベントインタラクションメソッドをカプセル化しており,ここで述べた問題は原生jsにもある.
keyupは,ユーザがボタンを持ち上げたときにトリガーされるもので,ボタンプロセス全体の最終段階に属するため,左側入力,右側同期表示の過程で特定の用途がある.典型的な例は、メール編集プレビューのアプリケーションです.

 
  
 
  
 
  
     
   
  
    
 
  
    <br>        $(function() {<br>            $('#t1').live('keyup', function() {<br>                $('#v1').text($(this).val());<br>            });<br>            $('#t2').live('keydown', function() {<br>                $('#v2').text($(this).val());<br>            });<br>            $('#t3').live('keypress', function() {<br>                $('#v3').text($(this).val());<br>            });<br>        });    <br>    
 
  


    <br/>    <div id="v1"><br/>    </div><br/>    <textarea id="t2"/><br/>    <div id="v2"><br/>    </div><br/>    <textarea id="t3"/><br/>    <div id="v3"><br/>    </div><br/><br/><br/> 
 </code></pre> 
 <br/>           ，  t1        v1 ， keypress keydown         ，                  ，keydown       ，           ，keypress    。 
  
 <p>  ：keydown     ，        ，        ，               ，</p> 
 <p>    keydown   ，     ，           ，        keyup           ，          。</p> 
 <p>keydown keypress                  。</p> 
 <p>         ：<br/></p> 
   
 <pre><code> 
  <br/> 
  <br/> 
  <br/><script type="text/javascript" src="/jquery/jquery.js"/> 
  <br/><script type="text/javascript"> 
  <br>$(document).ready(function(){ 
  <br>  $("input").keydown(function(event){ 
  <br>    $("div").html("Key: " + event.which); 
  <br>  }); 
  <br>}); 
  <br></script> 
  <br/> 
  <br/> 
   
  <p>         ：<input type="text"/><br/></p><p>             ，    div        。</p><br/><div/><br/><br/><br/> 
 </code></pre> 
  
 <div class="clearfix"> 
  <span id="art_bot" class="jbTestPos"/> 
 </div> 
</div>
                            </div>
                        </div>