js--5.事件-7.键盘事件

最新推荐文章于 2021-01-15 13:15:11 发布

原创最新推荐文章于 2021-01-15 13:15:11 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了网页中鼠标和键盘事件的应用，包括单击、按下、松开、移入移出等鼠标事件，以及键盘按键的onkeydown、onkeyup和onkeypress事件。并通过示例代码展示了如何在JavaScript中捕获这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 鼠标键盘事件

1.1 概述

1.2 鼠标事件

1.2.1 鼠标的单击事件

单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时放开鼠标键的这一完整过程。

单击事件一般应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象，Button对象一般只会用到onclick事件处理程序，因为该对象不能从用户那里得到任何信息，如果没有onclick事件处理程序，按钮对象将不会有任何作用。

注意：

在使用对象的单击事件时，如果在对象上按下鼠标键，然后移动鼠标到对象外再松开鼠标，单击事件无效，单击事件必须在对象上按下松开后，才会执行单击事件的处理程序。

1.2.2 鼠标的按下或松开事件

鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。

1.2.3 鼠标的移入移出事件

鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在鼠标移出对象上方时触发事件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。

1.2.4 鼠标的移动事件

鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。

1.3 键盘事件的使用

键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。Onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。

为了便于读者对键盘上的按键进行操作，下面以表格的形式给出其键码值。

字母和数字键的键码值

数字键盘上按键的键码值

控制键的键码值

如果想要在JavaScript中使用组合键，可以利用event.ctrlKey，event.shiftKey，event.altKey判断是否按下了ctrl键、shift键以及alt键。

2 demo

2.1 键盘事件

  <script type="text/javascript">
           window.onload = function(){
              /*
               * 键盘事件：
               * onkeydown
               *     - 按键被按下
               *     - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
               *     - 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
               *         这种设计是为了防止误操作的发生。
               * onkeyup
               *     - 按键被松开
               *
               *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
               */
             
              document.onkeydown = function(event){
                  event = event || window.event;
                 
                  /*
                   * 可以通过keyCode来获取按键的编码
                   * 通过它可以判断哪个按键被按下
                   * 除了keyCode，事件对象中还提供了几个属性
                   * altKey
                   * ctrlKey
                   * shiftKey
                   *     - 这个三个用来判断alt ctrl 和 shift是否被按下
                   *         如果按下则返回true，否则返回false
                   */
                 
                  //console.log(event.keyCode);
                 
                  //判断一个y是否被按下
                  //判断y和ctrl是否同时被按下
                  if(event.keyCode === 89 && event.ctrlKey){
                     console.log("ctrl和y都被按下了");
                  }
                 
                 
              };
             
              /*document.onkeyup = function(){
                  console.log("按键松开了");
              };*/
             
              //获取input
              var input = document.getElementsByTagName("input")[0];
             
              input.onkeydown = function(event){
                 
                  event = event || window.event;
                 
                  //console.log(event.keyCode);
                  //数字 48 - 57
                  //使文本框中不能输入数字
                  if(event.keyCode >= 48 && event.keyCode <= 57){
                     //在文本框中输入内容，属于onkeydown的默认行为
                     //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
                     return false;
                  }
              };
           };
       </script>
    </head>
    <body>
       <input type="text" />
    </body>
</html>