JavaScript如何實(shí)現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊
實(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于VSCode格式化JS自動添加或去掉分號的問題
這篇文章主要介紹了VSCode格式化JS自動添加或去掉分號的問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
Javascript學(xué)習(xí)之談?wù)凧S的全局變量跟局部變量(推薦)
這篇文章主要介紹了Javascript學(xué)習(xí)之談?wù)凧S的全局變量跟局部變量雖然腳本之家小編以前發(fā)過,但還是這篇文章整理的比較好,需要的朋友可以參考一下2016-08-08
JavaScript利用正則表達(dá)式替換字符串中的內(nèi)容
本文主要介紹了JavaScript利用正則表達(dá)式替換字符串中內(nèi)容的具體實(shí)現(xiàn)方法,并做了簡要注釋,便于理解。具有一定的參考價值,需要的朋友可以看下2016-12-12
原生js實(shí)現(xiàn)網(wǎng)頁頂部自動下拉/收縮廣告效果
本文主要介紹了原生js實(shí)現(xiàn)網(wǎng)頁頂部自動下拉/收縮廣告效果的實(shí)例代碼。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01
JavaScript實(shí)現(xiàn)簡單的日歷效果
本文給大家分享的是一個簡單的JavaScript制作的日歷模板,小伙伴們可以根據(jù)自己的需求,繼續(xù)補(bǔ)充,希望大家能夠喜歡2016-09-09
JavaScript實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語言實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel文件的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-07-07

