键盘事件与onclick事件联动

太过爱你忘了你带给我的痛 2023-10-05 17:27 46阅读 0赞

#### 键盘事件 ####

*  前言
 *  1.键盘事件
 *  2.键盘事件属性
 *  3.键盘响应顺序

--------------------

## 前言 ##

*  onkeydown 当按下按键时运行脚本
 *  onkeypress 当按键按下后并松开运行脚本
 *  onkeyup 当按键松开时运行脚本

--------------------

## 1.键盘事件 ##

HTM代码

<div id="div" ></div>

CSS代码

这里说一下click方法。

click 方法可以用来模拟鼠标左键单击一个元素。

当在支持click方法的元素上使用该方法时（比如元素），会触发该元素的 click 事件。该事件会一直向文档树的上层元素冒泡，也会触发它们各自的click事件。但是，冒泡而来的事件会让一个 `<a>` 元素像受到真实的鼠标点击一样执行页面的跳转。  
![对应表][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]  
如果键盘事件想指定在某一具体的div的话，可以给相应div加tabindex=‘1’，再将element对象换成该div。

## 2.键盘事件属性 ##

键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在水保事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>keyCode</td> 
   <td>该属性包含键盘中对应键位的键值</td> 
  </tr> 
  <tr> 
   <td>charCode</td> 
   <td>该属性包含键盘中对应键位的 Unicode 编码，仅 DOM 支持</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>发生事件的节点（包含元素），仅 DOM 支持</td> 
  </tr> 
  <tr> 
   <td>srcElement</td> 
   <td>发生事件的元素，仅 IE 支持</td> 
  </tr> 
  <tr> 
   <td>shiftKey</td> 
   <td>是否按下 Shift 键，如果按下返回 true，否则为false</td> 
  </tr> 
  <tr> 
   <td>ctrlKey</td> 
   <td>是否按下 Ctrl 键，如果按下返回 true，否则为false</td> 
  </tr> 
  <tr> 
   <td>altKey</td> 
   <td>是否按下 Alt 键，如果按下返回 true，否则为false</td> 
  </tr> 
  <tr> 
   <td>metaKey</td> 
   <td>是否按下 Mtea 键，如果按下返回 true，否则为false，仅 DOM 支持</td> 
  </tr> 
 </tbody> 
</table>

**示例1**  
ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中，表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。

document.onclick = function (e) {
        
        var e = e || window.event;  //标准化事件对象
        var t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
        if (e.ctrlKey && e.shiftKey) {
          //如果同时按下Ctrl和Shift键
            t.parentNode.removeChild(t);  //移出当前元素
        }
    }

keyCode 和 charCode 属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>IE 事件模型</th> 
   <th>DOM 事件模型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>keyCode（keypress）</td> 
   <td>返回所有字符键的正确值，区分大写状态（65<sub>90）和小写状态（97</sub>122）</td> 
   <td>功能键返回正确值，而 Shift、Ctrl、Alt、PrintScreen、ScrollLock 无返回值，其他所有键值都返回 0</td> 
  </tr> 
  <tr> 
   <td>keyCode（keydown）</td> 
   <td>返回所有键值（除 PrintScreen 键），字母键都以大写状态显示键值（65~90）</td> 
   <td>返回所有键值（除 PrintScreen 键），字母键都以大写状态显示键值（65~90）</td> 
  </tr> 
  <tr> 
   <td>keyCode（keyup）</td> 
   <td>返回所有键值（除 PrintScreen 键），字母键都以大写状态显示键值（65~90）</td> 
   <td>返回所有键值（除 PrintScreen 键），字母键都以大写状态显示键值（65~90）</td> 
  </tr> 
  <tr> 
   <td>charCode（keypress）</td> 
   <td>不支持该属性</td> 
   <td>返回字符键，区分大写状态（65<sub>90）和小写状态（97</sub>122），Shift、Ctrl、Alt、PrintScreen、ScrollLock 无返回值，其他所有键值都返回 0</td> 
  </tr> 
  <tr> 
   <td>charCode（keydown）</td> 
   <td>不支持该属性</td> 
   <td>所有键值为 0</td> 
  </tr> 
  <tr> 
   <td>charCode（keyup）</td> 
   <td>不支持该属性</td> 
   <td>所有键值为 0</td> 
  </tr> 
 </tbody> 
</table>

某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的，如下表所示。

**键位和码值对照表**

<table> 
 <thead> 
  <tr> 
   <th>键位</th> 
   <th>码值</th> 
   <th>键位</th> 
   <th>码值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0~9（数字键）</td> 
   <td>48~57</td> 
   <td>A~Z（字母键</td> 
   <td>） 65~90</td> 
  </tr> 
  <tr> 
   <td>Backspace（退格键）</td> 
   <td>8</td> 
   <td>Tab（制表键）</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td>Enter（回车键）</td> 
   <td>13</td> 
   <td>Space（空格键）</td> 
   <td>32</td> 
  </tr> 
  <tr> 
   <td>Left arrow（左箭头键）</td> 
   <td>37</td> 
   <td>Top arrow（上箭头键）</td> 
   <td>38</td> 
  </tr> 
  <tr> 
   <td>Right arrow（右箭头键）</td> 
   <td>39</td> 
   <td>Down arrow（下箭头键）</td> 
   <td>40</td> 
  </tr> 
 </tbody> 
</table>

示例2  
下面示例演示了如何使用方向键控制页面元素的移动效果。

<div id="box"></div>
    <script>
        var box = document.getElementById("box");  // 获取页面元素的引用指针
        box.style.position = "absolute";  // 色块绝对定位
        box.style.width = "20px";  // 色块宽度
        box.style.height = "20px";  // 色块高度
        box.style.backgroundColor = "red";  // 色块背景
        document.onkeydown = keyDown;
        //在Document对象中注册keyDown事件处理函数
        function keyDown(event){
          // 方向键控制元素移动函数
            var event = event || window.event;  // 标准化事件对象
            switch(event.keyCode){
          // 获取当前按下键盘键的编码
                case 37 :  // 按下左箭头键，向左移动5个像素
                    box.style.left = box.offsetLeft - 5  + "px";
                    break;
                case 39 :  // 按下右箭头键，向右移动5个像素
                    box.style.left = box.offsetLeft + 5 + "px";
                    break;
                case 38 :  // 按下上箭头键，向上移动5个像素
                    box.style.top = box.offsetTop  - 5 + "px";
                    break;
                case 40 :  // 按下下箭头键，向下移动5个像素
                    box.style.top = box.offsetTop  + 5 + "px";
                    break;
            }
            return false
        }
    </script>

在上面示例中，首先获取页面元素，通过 CSS 脚本控制元素绝对定位、大小和背景色。然后在 document 对象上注册鼠标按下事件类型处理函数，在事件回调函数 keyDown() 中侦测当前按下的方向键，并决定定位元素在窗口中的位置。其中元素的 offsetLeft 和 offsetTop 属性可以存取它在页面中的位置。

## 3.键盘响应顺序 ##

当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。

对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。

对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。

如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。

如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。  
示例  
下面设计一个简单示例，以获取键盘事件相应顺序。

<textarea id="text" cols="26" rows="16"></textarea>
    <script>
        var n = 1;  // 定义编号变量
        var text = document.getElementById("text");  // 获取文本区域的引用指针
        text.onkeydown = f;  // 注册keydown事件处理函数
        text.onkeyup = f;  // 注册keyup事件处理函数
        text.onkeypress = f;  // 注册keypress事件处理函数
        function f(e){
          // 事件调用函数
            var e = e || window.event;  // 标准化事件对象
            text.value += (n++) + "=" + e.type +"  (keyCode=" + e.keyCode + ")\n";
            //捕获事件响应信息
        }
    </script>

演示效果如下：

当分别输入 A、B、C 时：![键盘事件相应顺序][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 1]  
当分别输入 Shift、Ctrl、Alt 功能键时：![按键相应指令][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 2]  
当连续按下字符 A 时：![按键A][A]  
当连续按下 Shift 键时：![按键Shift][Shift]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210109230453980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210109231136769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210109231159519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[A]: https://img-blog.csdnimg.cn/20210109231221961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[Shift]: https://img-blog.csdnimg.cn/20210109231239157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70