游戏操作按键识别的原理-----JavaScript鼠标键盘事件

前言

      可能有人或许会好奇为什么玩游戏中敲击某个键或者鼠标左键/滚轮/右键敲击就能执行游戏中所设定的操作，难道是游戏开发者不用写程序计算机就能自动识别你敲击的是哪个键并执行，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

结语

      本文主要介绍了鼠标键盘事件的用法以及按键识别的方法。本文主要介绍鼠标键盘事件，故一笔带过文本操作事件和窗体操作事件。
（文章如有不当还请谅解和指导）