监听键盘鼠标事件 监听某个按键事件
当键盘上的某个键被按下时，会依次触发一次下面的事件：
onkeydown: 键盘按下这个动作（按下键盘）
onkeypress: 键盘被按住（一直按着键盘不动）
onkeyup: 键盘被弹起（松开键盘）
通过监听keydown事件既可以知道键盘被按下：
document.onkeydown = function(event) { // 键盘按下时触发 console.log('key down'); }; document.onkeypress = function(event) { // 键盘按住时触发 console.log('key press'); }; document.onkeyup = function (event) { // 键盘弹起时触发 console.log('key up'); }; // 控制台数据的顺序为：key down -> key press -> key up注意到键盘按下的event参数，该参数为KeyboardEvent事件对象，其中包含按键相关的一些属性。其中：
type: 事件类型，如'keydown'或者'keyup'
key: 表示按下的键盘内容是什么即键值，按下字母'p'时，值为'p'
code: 表示键盘代码，按下字母'p'时，值为'KeyP'
keyCode(过时): 整数，表示键码，每个键都有唯一的键码，字母'p'的键码为80
altKey: 布尔值，表示此时的alt键是否也按下
ctrKey: 布尔值，表示此时的alt键是否也按下
shiftKey: 布尔值，表示此时的shift键是否也按下
metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下
repeat: 布尔值，如果一个键一直被按着，则其值为true，表示重复
可以通过检查这些属性来判断用户按下的是什么键，以及是否ctrl和alt等键是否同时按下。
document.onkeydown = function(event) { // 键盘按下是触发 console.log('key down: ' + event.key); if (event.altKey) { console.log('alt is active'); } if (event.shiftKey) { console.log('shift is active'); } }; 监听鼠标事件相应的也可以监听鼠标相关的事件，触发时的参数event为MouseEvent对象类型：
onclick: 鼠标点击事件
ondblclick: 鼠标双击事件
onmousedown: 鼠标上的按钮被按下了
onmouseup: 鼠标按下后松开时触发的事件
onmousemove: 鼠标移动时触发的事件
onmouseout: 鼠标离开监听该事件的元素或子元素时触发的事件
onmouseover: 鼠标移动到监听该事件的元素或子元素时触发的事件
onmousewheel: 鼠标滚轮事件，一般使用onscroll事件
MouseEvent对象中包含下面比较有用的属性：
type: 事件类型，如'mosemove'或者'mousedown'
button: 整形，触发鼠标事件时按下的按钮编号
buttons: 整形，触发鼠标事件时弹起来的按钮编号
clientX: 鼠标指针在DOM内容区的X坐标
clientY：鼠标指针在DOM内容区的Y坐标
offsetX: 鼠标指针相对父节点填充边缘的X坐标
offsetY: 鼠标指针相对父节点填充边缘的Y坐标
screenX: 鼠标指针在全局屏幕的X坐标
screenY: 鼠标指针在全局屏幕的Y坐标
pageX: 鼠标指针在整个DOM内容（包括分页）的X坐标
pageY: 鼠标指针在整个DOM内容（包括分页）的Y坐标
altKey: 布尔值，表示此时的alt键是否也按下
ctrKey: 布尔值，表示此时的alt键是否也按下
shiftKey: 布尔值，表示此时的shift键是否也按下
metaKey: 布尔值，windows平台表示Window键是否同时按下，mac表示Command键是否同时按下
通过鼠标事件的event属性，可以获取鼠标点击的位置，鼠标点击时是否按住ctrl等。
监听连续的按键事件在很多游戏中，都要隐藏的秘笈，比如上上下下左左右右BABA这样的秘笈，那么怎么监听事件，能够知道用户是按下了这个秘笈呢？
实现的方法就是用一个数组来记录连续按键的状态，每次按键正确则匹配下一个，知道所有匹配成功。
// 上上下下左左右右BABA的键值 const secretKey = ['up', 'up', 'down', 'down', 'left', 'left', 'right', 'right', 'b', 'a', 'b', 'a']; // 秘笈的键码 const secretKeyCode = [38, 38, 40, 40, 37, 37, 39, 39, 66, 65, 66, 65]; // 当前按键匹配的状态 let secretKeyCodeStatus = new Array(secretKeyCode.length).fill(0); // 当前正确秘笈按键的索引 // let correctCodeIndex = 0; const CORRECT_STATUS = 1; // 表示正确匹配按键的状态 document.onkeydown = function(event) { // 查找第一个0的位置，即当前按键应该匹配的位置 let correctCodeIndex = secretKeyCodeStatus.lastIndexOf(CORRECT_STATUS); correctCodeIndex = correctCodeIndex === -1 ? 0 : correctCodeIndex + 1; // 如果所有的按键都正确，则返回 if (correctCodeIndex > secretKeyCode.length) { alert('success'); return true; } // 如果本次按键正确，则记录 if (event.keyCode === secretKeyCode[correctCodeIndex]) { console.log('keyCode: ' + event.keyCode + ' code: ' + event.code + ' --correct,index:' + correctCodeIndex); // 所有按键都正确则成功 if (correctCodeIndex + 1 === secretKeyCodeStatus.length) { alert('success'); // 重置状态 secretKeyCodeStatus = new Array(secretKeyCode.length).fill(0); return true; } else { // 否则记录当前按键成功 secretKeyCodeStatus[correctCodeIndex] = CORRECT_STATUS; } } else { console.log('keyCode: ' + event.keyCode + ' code: ' + event.code + ' --reset'); // 按键错误则重置 secretKeyCodeStatus = new Array(secretKeyCode.length).fill(0); } }; 模拟按键上面我们说明了如何监听页面的按键和键盘事件，但是有的时候我们需要使用代码模拟按钮操作。