前言
可能有人或許會好奇爲什麼玩遊戲中敲擊某個鍵或者鼠標左鍵/滾輪/右鍵敲擊就能執行遊戲中所設定的操作，難道是遊戲開發者不用寫程序計算機就能自動識別你敲擊的是哪個鍵並執行，NO! NO! NO! 這個與鼠標鍵盤事件相關。
文章思維導圖
鼠標事件
1.click點擊
document.onclick = function() {
console.log("click");
}
// 在頁面點擊時觸發，控制檯輸出 click
鼠標點擊後控制檯的顯示
2.mousedown 按下
document.onmousedown = function() {
console.log("mousedown");
}
// 在按下時觸發，控制檯輸出 mousedown
鼠標點擊後控制檯的顯示
3.mouseup 擡起
document.onmouseup = function() {
console.log("mouseup");
}
// 在擡起時觸發，控制檯輸出 mouseup
鼠標點擊後控制檯的顯示
通過以下介紹可以大家應該可以看出：
click = mousedown +mouseup
那麼就一個一問題如何區分是左鍵點擊的還是右鍵點擊的還是滾輪點擊的？
區分左右鍵就有這樣一個東西----button
document.onmousedown = function(e) {
console.log(e)
}
// 在鼠標按下時觸發，控制檯輸出MouseEvent
此圖是在鼠標點擊後控制檯中的顯示
【如何打開控制檯：瀏覽器中網頁上鼠標右鍵選擇檢查再選擇console】
在控制檯中輸出的MouseEvent 裏找到button
button：0 代表什麼呢？代表是左鍵敲擊的
button：1 代表是滾輪敲擊的
button：2 代表是右鍵敲擊的
注：只有mousedown 和 mouseup 可以區分左右鍵，click只能監聽左鍵
document.onmousedown = function(e) {
if (e.button == 2) {
console.log("right");
//如果button 爲2 即點擊鼠標左鍵 控制檯輸出right
} else if (e.button == 0) {
console.log("left");
//如果 button 爲 0 即點擊鼠標右鍵 控制檯輸出left
} else {
console.log("scroll");
//如果button 爲 0 即點擊鼠標滾輪 控制檯輸出scroll
}
}
鼠標從左到右依次點擊後控制檯的顯示
如何區分click 和mousedown 呢？
var firstTime = 0;
//默認初始點擊時間（即按下的時間）爲0
var lastTime = 0;
//默認最終點擊時間（即擡起的時間）爲 0
var key = false;
document.onmousedown = function() {
firstTime = new Date().getTime();
}
document.onmouseup = function() {
lastTime = new Date().getTime();
if (lastTime - firstTime < 300) {
key = true;
}
}
document.onclick = function() {
if (key) {
console.log("click");
key = false;
}
}
//從按下到擡起小於300毫秒 即爲點擊 否則即爲拖拽
【300毫秒爲什麼概念呢？ 300毫秒即爲0.3秒 ，一般點擊一次很快就會擡起，時間小於0.3秒】
4.mouseleave/mouseenter
當鼠標移動至選定區域時觸發時間
例如：規定一個頁面中有一個紅色方塊，當鼠標移上去爲藍色
<div style="width: 500px; height: 500px; background-color: red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.onmouseover = function() {
div.style.background = "blue";
}
</script>
5.mouseout/mouseleave
當鼠標離開指定區域觸發事件
例如：仍是剛纔那個紅方塊，當鼠標移開後變成黃色
<div style="width: 500px; height: 500px; background-color: red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.onmouseover = function() {
div.style.background = "blue";
}
div.onmouseout = function() {
div.style.background = "yellow";
}
</script>
6.mousemove
鼠標移動時觸發事件
例如：控制檯上顯示鼠標移動至的位置的座標
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
document.onmousemove = function(e) {
var event = e || window.event;
console.log(e.pageX + " " + e.pageY);
div.style.left = e.pageX + "px";
div.style.top = e.pageY + "px";
}
</script>
此圖爲鼠標移動過的位置的的座標
鍵盤事件
1.keypress 敲擊鍵盤
document.onkeypress = function() {
console.log("keypress");
}
//鍵盤敲擊後，控制檯中顯示 keypress
2.keydown 按下
document.onkeydown = function() {
console.log("keydown");
}
//鍵盤按下後，控制檯中顯示 keydown
3.keyup擡起
document.onkeyup = function() {
console.log("keyup");
}
//鍵盤按下後，控制檯中顯示 keyup
順序：
keydown > keypress > keyup
keydown 和 keypress 的區別：
keydown 可以響應任意鍵盤按鍵，keypress只可以響應字符類鍵盤按鍵
keypress 返回 ASCLL碼，可以轉換相應字符
document.onkeypress = function(e) {
console.log(String.fromCharCode(e.charCode));
}
//AScll碼轉換爲對應的鍵盤上的按鍵
鍵盤從a依次敲到k後控制檯上的顯示
下圖爲ASCLL碼錶（部分）
文本操作事件
1.input
2.blur
3. focus
4. change
窗體操作事件
(window上的事件)
1.scroll
2.load
結語
本文主要介紹了鼠標鍵盤事件的用法以及按鍵識別的方法。本文主要介紹鼠標鍵盤事件，故一筆帶過文本操作事件和窗體操作事件。
（文章如有不當還請諒解和指導）