快捷導(dǎo)航

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

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

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

實際應(yīng)用中,我們會遇到監(jiān)聽按鍵輸入和鼠標(biāo)點擊事件,在這里我們進(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.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)和實現(xiàn)相關(guān)的數(shù)字代碼的 Number，用于標(biāo)識按鍵的未修改值。
了解了上面屬性,我們就可以進(jìn)行使用代碼的方式實時獲取輸入的鍵值

<!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)的屬性顯示,也可以點擊該鏈接實時嘗試:

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)指針在點擊元素（DOM）中的X坐標(biāo)。
MouseEvent.clientY 只讀,鼠標(biāo)指針在點擊元素（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)點擊時觸發(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如何實現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點擊的文章就介紹到這了,更多相關(guān)JavaScript鍵盤鼠標(biāo)監(jiān)聽功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: