JavaScript键盘鼠标监听功能

朱雀 2022-01-22 05:39 605阅读 0赞

实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.

#### KeyboardEvent ####

KeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键（Each event describes a key）；事件类型keydown， keypress 与 keyup 可以确定是哪种事件在活动。  
KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候，使用 HTML5 input 事件代替。例如，用户使用手持系统如平板电脑输入时， 按键事件可能不会触发。

##### 方法 #####

本接口同样会继承对象父代的方法， UIEvent 和 Event。

*  KeyboardEvent.getModifierState()返回一个 Boolean，表示在事件创建时，修改键如Alt ， Shift， Ctrl， Meta等是否按下。
 *  KeyboardEvent.initKeyEvent()初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。
 *  KeyboardEvent.initKeyboardEvent() 初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。

介绍下我们常用的一些属性：

*  KeyboardEvent.key
 *  KeyboardEvent.code
 *  KeyboardEvent.ctrlKey
 *  KeyboardEvent.shiftKey
 *  KeyboardEvent.altKey
 *  KeyboardEvent.metaKey

##### KeyboardEvent.key #####

如果你按下的按钮所代表的是一个可打印的字符（printed representation），那么这个 key 的值就是这个字符（譬如：a、Enter、Shift、CapsLock、Backspace）。。

##### KeyboardEvent.code #####

这个值比较诡异，它表示你按了键盘上的哪个按键。你按 `a`，`code` 的值是 `KeyA`，你按左边的 `Shift`，`code` 的值是 `ShiftLeft`。什么意思呢？就是他表示你按的按键在键盘的哪个位置。这里就有趣了，因为不同语言的键盘同一个键代表的字符可能不同，但是位置是相同的。打个比方：`KeyQ` 代表的是我们普通键盘q按键。但是呢 Dvorak 键盘q这个位置的按钮代表的不是 `q`，而是`'`。所以如果你按同一个按钮，key 的值可能不同，code 的值会相同。

##### KeyboardEvent.keyCode 只读 #####

返回一个表示系统和实现相关的数字代码的 Number， 用于标识按键的未修改值。  
了解了上面属性,我们就可以进行使用代码的方式实时获取输入的键值

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘事件监听</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #container {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding-top: 20px;
            }
    
            table,
            table tr th,
            table tr td {
                border: 1px solid #000;
            }
    
            table {
                min-height: 25px;
                line-height: 25px;
                text-align: center;
                border-collapse: collapse;
                padding: 2px;
            }
    
            th {
                width: 150px;
            }
        </style>
        <script type="text/javascript" language=JavaScript>
            window.onload = function () {
              const key = document.getElementById('key');
              const keyCode = document.getElementById('keyCode');
              const code = document.getElementById('code');
              const ctrlKey = document.getElementById('ctrlKey');
              const metaKey = document.getElementById('metaKey');
              const shiftKey = document.getElementById('shiftKey');
              const altKey = document.getElementById('altKey');
              const combineKey = document.getElementById('combineKey');
    
    
              document.onkeydown = function(event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                e.preventDefault();  //阻止默认事件
                // 设置获取的值
                key.innerHTML = e.key;
                keyCode.innerHTML = e.keyCode;
                code.innerHTML = e.code;
                ctrlKey.innerHTML = e.ctrlKey;
                metaKey.innerHTML = e.metaKey;
                shiftKey.innerHTML = e.shiftKey;
                altKey.innerHTML = e.altKey;
    
                if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
                  let result = '';
                  if (e.altKey) {
                    result = 'Alt';
                  } else if (e.shiftKey) {
                    result = 'Shift';
                  } else if (e.metaKey) {
                    result = 'Meta';
                  } else if (e.ctrlKey) {
                    result = 'Control';
                  }
                  combineKey.innerHTML = result !== e.key ? `${result} + ${e.key}` : `${result}`;
                }  else {
                  combineKey.innerHTML = '-';
                }
              };
            }
        </script>
    </head>
    <body>
    <div id="container">
        <table border="0px">
            <tr>
                <th>key</th>
                <th>keyCode</th>
                <th>code</th>
                <th>ctrlKey</th>
                <th>metaKey</th>
                <th>shiftKey</th>
                <th>altKey</th>
                <th>组合健</th>
            </tr>
            <tr>
                <td id="key">-</td>
                <td id="keyCode">-</td>
                <td id="code">-</td>
                <td id="ctrlKey">-</td>
                <td id="metaKey">-</td>
                <td id="shiftKey">-</td>
                <td id="altKey">-</td>
                <td id="combineKey">-</td>
            </tr>
        </table>
        <hr />
    </div>
    </body>
    </html>

显示结果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]  
当我们在键盘上输入键值时,会有相应的属性显示,也可以点击该链接实时尝试:

See the Pen [keyboardEvent][] by suwu150 ( [@suwu150][suwu150]) on [CodePen][].

#### MouseEvent ####

从上面我们了解到了键盘事件的监听,在这里我们继续学习鼠标事件的监听:  
MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

介绍下我们常用的一些属性:

*  MouseEvent.altKey 只读,当鼠标事件触发的时，如果alt 键被按下，返回true;
 *  MouseEvent.button 只读,当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。这些数值代表的意义分别是,button=0（鼠标左键），button=2（鼠标右键），button=1（鼠标中间键）
 *  MouseEvent.buttons 只读,当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。这些数值代表的意义分别是,buttons=1（鼠标左键），buttons=2（鼠标右键），buttons=3（同时按下左健和右键）,buttons=4（鼠标中间键）,buttons=5（同时按下左健和中间键）,buttons=6（同时按下中间健和右键）,buttons=7（同时按下左健、右键和中间键）.
 *  MouseEvent.clientX 只读,鼠标指针在点击元素（DOM）中的X坐标。
 *  MouseEvent.clientY 只读,鼠标指针在点击元素（DOM）中的Y坐标。
 *  MouseEvent.ctrlKey 只读,当鼠标事件触发时，如果 control 键被按下，则返回 true；
 *  MouseEvent.metaKey 只读,当鼠标事件触发时，如果 meta键被按下，则返回 true；
 *  MouseEvent.shiftKey 只读当鼠标事件触发时，如果 shift 键被按下，则返回 true；
 *  MouseEvent.which 只读,当鼠标事件触发时，表示被按下的按钮。

同样的,我们使用代码进行获取鼠标点击时触发的值

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘事件监听</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #container {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding-top: 20px;
            }
    
            table,
            table tr th,
            table tr td {
                border: 1px solid #000;
            }
    
            table {
                min-height: 25px;
                line-height: 25px;
                text-align: center;
                border-collapse: collapse;
                padding: 2px;
            }
    
            th {
                width: 130px;
            }
        </style>
        <script type="text/javascript" language=JavaScript>
          function doNothing(){
            window.event.returnValue=false;
            return false;
          }
    
            window.onload = function () {
              const button = document.getElementById('button');
              const buttons = document.getElementById('buttons');
              const clientX = document.getElementById('clientX');
              const clientY = document.getElementById('clientY');
              const ctrlKey = document.getElementById('ctrlKey');
              const metaKey = document.getElementById('metaKey');
              const shiftKey = document.getElementById('shiftKey');
              const altKey = document.getElementById('altKey');
              const which = document.getElementById('which');
              const combineKey = document.getElementById('combineKey');
    
    
              document.onmousedown = function(event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                e.preventDefault();  //阻止默认事件
                // 设置获取的值
                button.innerHTML = e.button;
                buttons.innerHTML = e.buttons;
                clientX.innerHTML = e.clientX;
                clientY.innerHTML = e.clientY;
                ctrlKey.innerHTML = e.ctrlKey;
                metaKey.innerHTML = e.metaKey;
                shiftKey.innerHTML = e.shiftKey;
                altKey.innerHTML = e.altKey;
                which.innerHTML = e.which;
    
                function getButton(value) {
                  let buttonname = '';
                  if (value === 0) buttonname = '鼠标左键';
                  if (value === 1) buttonname = '鼠标中间键';
                  if (value === 2) buttonname = '鼠标右键';
                  return buttonname;
                }
    
                if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
                  let result = '';
                  if (e.altKey) {
                    result = 'Alt';
                  } else if (e.shiftKey) {
                    result = 'Shift';
                  } else if (e.metaKey) {
                    result = 'Meta';
                  } else if (e.ctrlKey) {
                    result = 'Control';
                  }
                  combineKey.innerHTML = `${result} + ${getButton(e.button)}`;
                }  else {
                  combineKey.innerHTML = getButton(e.button);
                }
              };
            }
        </script>
    </head>
    <body oncontextmenu="doNothing()">
    <div id="container">
        <table border="0px">
            <tr>
                <th>button</th>
                <th>buttons</th>
                <th>clientX</th>
                <th>clientY</th>
                <th>ctrlKey</th>
                <th>metaKey</th>
                <th>shiftKey</th>
                <th>altKey</th>
                <th>which</th>
                <th>组合健</th>
            </tr>
            <tr>
                <td id="button">-</td>
                <td id="buttons">-</td>
                <td id="clientX">-</td>
                <td id="clientY">-</td>
                <td id="ctrlKey">-</td>
                <td id="metaKey">-</td>
                <td id="shiftKey">-</td>
                <td id="altKey">-</td>
                <td id="which">-</td>
                <td id="combineKey">-</td>
            </tr>
        </table>
        <hr />
    </div>
    </body>
    </html>

效果如下:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]  
可参见以下链接进行操作:

See the Pen [MouseEvent][] by suwu150 ( [@suwu150][suwu150]) on [CodePen][].

#### 常见键值 ####

<table> 
 <tbody> 
  <tr> 
   <td colspan="8"><strong>字母和数字键的键码值(keyCode)</strong></td> 
  </tr> 
  <tr> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>65</td> 
   <td>J</td> 
   <td>74</td> 
   <td>S</td> 
   <td>83</td> 
   <td>1</td> 
   <td>49</td> 
  </tr> 
  <tr> 
   <td>B</td> 
   <td>66</td> 
   <td>K</td> 
   <td>75</td> 
   <td>T</td> 
   <td>84</td> 
   <td>2</td> 
   <td>50</td> 
  </tr> 
  <tr> 
   <td>C</td> 
   <td>67</td> 
   <td>L</td> 
   <td>76</td> 
   <td>U</td> 
   <td>85</td> 
   <td>3</td> 
   <td>51</td> 
  </tr> 
  <tr> 
   <td>D</td> 
   <td>68</td> 
   <td>M</td> 
   <td>77</td> 
   <td>V</td> 
   <td>86</td> 
   <td>4</td> 
   <td>52</td> 
  </tr> 
  <tr> 
   <td>E</td> 
   <td>69</td> 
   <td>N</td> 
   <td>78</td> 
   <td>W</td> 
   <td>87</td> 
   <td>5</td> 
   <td>53</td> 
  </tr> 
  <tr> 
   <td>F</td> 
   <td>70</td> 
   <td>O</td> 
   <td>79</td> 
   <td>X</td> 
   <td>88</td> 
   <td>6</td> 
   <td>54</td> 
  </tr> 
  <tr> 
   <td>G</td> 
   <td>71</td> 
   <td>P</td> 
   <td>80</td> 
   <td>Y</td> 
   <td>89</td> 
   <td>7</td> 
   <td>55</td> 
  </tr> 
  <tr> 
   <td>H</td> 
   <td>72</td> 
   <td>Q</td> 
   <td>81</td> 
   <td>Z</td> 
   <td>90</td> 
   <td>8</td> 
   <td>56</td> 
  </tr> 
  <tr> 
   <td>I</td> 
   <td>73</td> 
   <td>R</td> 
   <td>82</td> 
   <td>0</td> 
   <td>48</td> 
   <td>9</td> 
   <td>57</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="4"><strong>数字键盘上的键的键码值(keyCode)</strong></td> 
   <td colspan="4"><strong>功能键键码值(keyCode)</strong></td> 
  </tr> 
  <tr> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
  </tr> 
  <tr> 
   <td>0</td> 
   <td>96</td> 
   <td>8</td> 
   <td>104</td> 
   <td>F1</td> 
   <td>112</td> 
   <td>F7</td> 
   <td>118</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>97</td> 
   <td>9</td> 
   <td>105</td> 
   <td>F2</td> 
   <td>113</td> 
   <td>F8</td> 
   <td>119</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>98</td> 
   <td>*</td> 
   <td>106</td> 
   <td>F3</td> 
   <td>114</td> 
   <td>F9</td> 
   <td>120</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>99</td> 
   <td>+</td> 
   <td>107</td> 
   <td>F4</td> 
   <td>115</td> 
   <td>F10</td> 
   <td>121</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>100</td> 
   <td>Enter</td> 
   <td>108</td> 
   <td>F5</td> 
   <td>116</td> 
   <td>F11</td> 
   <td>122</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>101</td> 
   <td>-</td> 
   <td>109</td> 
   <td>F6</td> 
   <td>117</td> 
   <td>F12</td> 
   <td>123</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>102</td> 
   <td>.</td> 
   <td>110</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>103</td> 
   <td>/</td> 
   <td>111</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="8"><strong>控制键键码值(keyCode)</strong></td> 
  </tr> 
  <tr> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
  </tr> 
  <tr> 
   <td>BackSpace</td> 
   <td>8</td> 
   <td>Esc</td> 
   <td>27</td> 
   <td>Right Arrow</td> 
   <td>39</td> 
   <td>-_</td> 
   <td>189</td> 
  </tr> 
  <tr> 
   <td>Tab</td> 
   <td>9</td> 
   <td>Spacebar</td> 
   <td>32</td> 
   <td>Dw Arrow</td> 
   <td>40</td> 
   <td>.&gt;</td> 
   <td>190</td> 
  </tr> 
  <tr> 
   <td>Clear</td> 
   <td>12</td> 
   <td>Page Up</td> 
   <td>33</td> 
   <td>Insert</td> 
   <td>45</td> 
   <td>/?</td> 
   <td>191</td> 
  </tr> 
  <tr> 
   <td>Enter</td> 
   <td>13</td> 
   <td>Page Down</td> 
   <td>34</td> 
   <td>Delete</td> 
   <td>46</td> 
   <td>`~</td> 
   <td>192</td> 
  </tr> 
  <tr> 
   <td>Shift</td> 
   <td>16</td> 
   <td>End</td> 
   <td>35</td> 
   <td>Num Lock</td> 
   <td>144</td> 
   <td>[{ </td> 
   <td>219</td> 
  </tr> 
  <tr> 
   <td>Control</td> 
   <td>17</td> 
   <td>Home</td> 
   <td>36</td> 
   <td>;:</td> 
   <td>186</td> 
   <td>/|</td> 
   <td>220</td> 
  </tr> 
  <tr> 
   <td>Alt</td> 
   <td>18</td> 
   <td>Left Arrow</td> 
   <td>37</td> 
   <td>=+</td> 
   <td>187</td> 
   <td>]}</td> 
   <td>221</td> 
  </tr> 
  <tr> 
   <td>Cape Lock</td> 
   <td>20</td> 
   <td>Up Arrow</td> 
   <td>38</td> 
   <td>,&lt;</td> 
   <td>188</td> 
   <td>'"</td> 
   <td>222</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td colspan="8"><strong>多媒体键码值(keyCode)</strong></td> 
  </tr> 
  <tr> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
   <td>按键</td> 
   <td>键码</td> 
  </tr> 
  <tr> 
   <td>音量加</td> 
   <td>175</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>音量减</td> 
   <td>174</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>停止</td> 
   <td>179</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>静音</td> 
   <td>173</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>浏览器</td> 
   <td>172</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>邮件</td> 
   <td>180</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>搜索</td> 
   <td>170</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>收藏</td> 
   <td>171</td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

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

参考链接:

1.[https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent][https_developer.mozilla.org_zh-CN_docs_Web_API_KeyboardEvent]  
2.[https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/ctrlKey][https_developer.mozilla.org_zh-CN_docs_Web_API_MouseEvent_ctrlKey]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220122/d75dcd01e0b44929bc3c15cab928b096.png
[keyboardEvent]: https://codepen.io/suwu150/pen/pXzGyP/
[suwu150]: https://codepen.io/suwu150
[CodePen]: https://codepen.io
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/accd0f13662a4f7ca2ef2a00a70f795e.png
[MouseEvent]: https://codepen.io/suwu150/pen/XLWKXG/
[https_developer.mozilla.org_zh-CN_docs_Web_API_KeyboardEvent]: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent
[https_developer.mozilla.org_zh-CN_docs_Web_API_MouseEvent_ctrlKey]: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/ctrlKey