JavaScript如何實(shí)現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊

更新時間：2020年07月20日 12:03:50 作者：suwu150

這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

實(shí)際應(yīng)用中,我們會遇到監(jiān)聽按鍵輸入和鼠標(biāo)點(diǎn)擊事件,在這里我們進(jìn)行對鼠標(biāo)和鍵盤事件的總結(jié).

KeyboardEvent

KeyboardEvent 對象描述了鍵盤的交互方式。每個事件都描述了一個按鍵（Each event describes a key）；事件類型keydown， keypress 與 keyup 可以確定是哪種事件在活動。
KeyboardEvent 表示剛剛發(fā)生在按鍵上的事情。當(dāng)你需要處理文本輸入的時候，使用 HTML5 input 事件代替。例如，用戶使用手持系統(tǒng)如平板電腦輸入時，按鍵事件可能不會觸發(fā)。

方法

本接口同樣會繼承對象父代的方法， UIEvent 和 Event。

KeyboardEvent.getModifierState()返回一個 Boolean，表示在事件創(chuàng)建時，修改鍵如Alt ， Shift， Ctrl， Meta等是否按下。
KeyboardEvent.initKeyEvent()初始化一個 KeyboardEvent 對象。現(xiàn)在的標(biāo)準(zhǔn)方式是使用 KeyboardEvent() 構(gòu)造器。
KeyboardEvent.initKeyboardEvent() 初始化一個 KeyboardEvent 對象。現(xiàn)在的標(biāo)準(zhǔn)方式是使用 KeyboardEvent() 構(gòu)造器。

介紹下我們常用的一些屬性：

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

KeyboardEvent.ctrlKey | shiftKey | altKey | metaKey 比較簡單，表示當(dāng)你按下鍵盤的時候，Ctrl | Shift | Alt | meta 按鍵是否已經(jīng)被按下。如果已經(jīng)被按下這些值就是 true，通常我們要運(yùn)用組合鍵的判斷會用到（譬如：Alt + a）。大家看到 meta 會疑惑這個是哪個鍵？在 Mac 平臺上指的是 command 鍵（⌘），而在 Windows 平臺指的是 windows 鍵（⊞）。但是不是所有 Windows 電腦鍵盤都有 ⊞ 這個鍵的。接下來我們介紹下最重要的兩個屬性 key 和 code。

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 只讀

返回一個表示系統(tǒng)和實(shí)現(xiàn)相關(guān)的數(shù)字代碼的 Number，用于標(biāo)識按鍵的未修改值。
了解了上面屬性,我們就可以進(jìn)行使用代碼的方式實(shí)時獲取輸入的鍵值

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>鍵盤事件監(jiān)聽</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(); //阻止默認(rèn)事件
   // 設(shè)置獲取的值
   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>

顯示結(jié)果如下:

在這里插入圖片描述

當(dāng)我們在鍵盤上輸入鍵值時,會有相應(yīng)的屬性顯示,也可以點(diǎn)擊該鏈接實(shí)時嘗試:

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

MouseEvent

從上面我們了解到了鍵盤事件的監(jiān)聽,在這里我們繼續(xù)學(xué)習(xí)鼠標(biāo)事件的監(jiān)聽:
MouseEvent 接口指用戶與指針設(shè)備( 如鼠標(biāo) )交互時發(fā)生的事件。使用此接口的常見事件包括：click，dblclick，mouseup，mousedown。

介紹下我們常用的一些屬性:

MouseEvent.altKey 只讀,當(dāng)鼠標(biāo)事件觸發(fā)的時，如果alt 鍵被按下，返回true;
MouseEvent.button 只讀,當(dāng)鼠標(biāo)事件觸發(fā)的時，如果鼠標(biāo)按鈕被按下（如果有的話），將會返回一個數(shù)值。這些數(shù)值代表的意義分別是,button=0（鼠標(biāo)左鍵），button=2（鼠標(biāo)右鍵），button=1（鼠標(biāo)中間鍵）
MouseEvent.buttons 只讀,當(dāng)鼠標(biāo)事件觸發(fā)的時，如果多個鼠標(biāo)按鈕被按下（如果有的話），將會返回一個或者多個代表鼠標(biāo)按鈕的數(shù)字。這些數(shù)值代表的意義分別是,buttons=1（鼠標(biāo)左鍵），buttons=2（鼠標(biāo)右鍵），buttons=3（同時按下左健和右鍵）,buttons=4（鼠標(biāo)中間鍵）,buttons=5（同時按下左健和中間鍵）,buttons=6（同時按下中間健和右鍵）,buttons=7（同時按下左健、右鍵和中間鍵）.
MouseEvent.clientX 只讀,鼠標(biāo)指針在點(diǎn)擊元素（DOM）中的X坐標(biāo)。
MouseEvent.clientY 只讀,鼠標(biāo)指針在點(diǎn)擊元素（DOM）中的Y坐標(biāo)。
MouseEvent.ctrlKey 只讀,當(dāng)鼠標(biāo)事件觸發(fā)時，如果 control 鍵被按下，則返回 true；
MouseEvent.metaKey 只讀,當(dāng)鼠標(biāo)事件觸發(fā)時，如果 meta鍵被按下，則返回 true；
MouseEvent.shiftKey 只讀當(dāng)鼠標(biāo)事件觸發(fā)時，如果 shift 鍵被按下，則返回 true；
MouseEvent.which 只讀,當(dāng)鼠標(biāo)事件觸發(fā)時，表示被按下的按鈕

同樣的,我們使用代碼進(jìn)行獲取鼠標(biāo)點(diǎn)擊時觸發(fā)的值

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>鍵盤事件監(jiān)聽</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(); //阻止默認(rèn)事件
   // 設(shè)置獲取的值
   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 = '鼠標(biāo)左鍵';
    if (value === 1) buttonname = '鼠標(biāo)中間鍵';
    if (value === 2) buttonname = '鼠標(biāo)右鍵';
    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>

效果如下:

在這里插入圖片描述

可參見以下鏈接進(jìn)行操作:

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

常見鍵值

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

數(shù)字鍵盤上的鍵的鍵碼值(keyCode)				功能鍵鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

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

多媒體鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
音量加	175
音量減	174
停止	179
靜音	173
瀏覽器	172
郵件	180
搜索	170
收藏	171

參考鏈接:

1.https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent
2.https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/ctrlKey

到此這篇關(guān)于JavaScript如何實(shí)現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊的文章就介紹到這了,更多相關(guān)JavaScript鍵盤鼠標(biāo)監(jiān)聽功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: