鼠标事件
鼠标事件的种类
鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。
click：按下鼠标（通常是按下主按钮）时触发。
dblclick：在同一个元素上双击鼠标时触发。
mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。
contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。
……
MouseEvent 接口概述
MouseEvent接口代表了鼠标相关的事件，单击（click）、双击（dblclick）等动作，所产生的事件对象都是MouseEvent实例。
此外，滚轮事件和拖拉事件也是MouseEvent实例。
MouseEvent接口继承了Event接口，所以拥有Event的所有属性和方法。它还有自己的属性和方法。
可以使用console.log打印出可选参数
document.onclick=function (ev){
console.log(ev);
}
screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
altKey：布尔值，是否同时按下 Alt 键，默认值为false。
metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
buttons：数值，表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。1（二进制001）表示按下主键（通常是左键），2（二进制010）表示按下次要键（通常是右键），4（二进制100）表示按下辅助键（通常是中间键）。因此，如果返回3（二进制011）就表示同时按下了左键和右键。
relatedTarget：节点对象，表示事件的相关节点，默认为null。
……
坐标兼容情况：
高级游览器：
clientX / clientY
layerX / layerY X 不兼容
movementX / movementY X 不兼容
offsetX / offsetY 相对于被点击元素的坐标
pageX / pageY X 不兼容（但高级游览器可以使用）
screenX / screenY
X / Y X 不要用，虽然它在高级游览器里是client的缩写，但ie里不认
pageX / pageY 在整个页面里的坐标
ie里：
clientX / clientY 相对于可视化区域坐标 -- 实用
offsetX / offsetY 相对于被点击元素的坐标
screenX / screenY 相对于屏幕的坐标 -- 不实用
X / Y X ie里它是offset的缩写
-----------------------------------------------------
实际可用：
clientX / clientY 相对于可视化区域坐标
offsetX / offsetY 相对于被点击元素的坐标
pageX / pageY => clientX+scrollleft（兼容写法） 在整个页面里的坐标
-----------------------------------------------------
兼容性
为了兼容各种浏览器，因为有的浏览器可能对象是用ev表示的，有的则是event表示的，为了避免有的浏览器获取出现undefine，所以要用兼容方法来避免。
// if处理兼容
document.onclick=function (ev){
// 打印ev
document.getElementById('s1').innerHTML=ev;
if (ev){
// 游览器支持ev时就显示if里的
document.getElementById('s1').innerHTML=ev.clientX+','+ev.clientY;
}else{
//不支持就显示else里的
document.getElementById('s1').innerHTML=event.clientX+','+event.clientY;
}
}
// 简化写法
document.onclick=function (ev){
//变量名不一定是ev，oEevent或者其他的都行
ev=ev||event;
// 使用或运算，当游览器支持ev时就直接显示，不支持时就ev赋值event传进去
//然后都使用ev；
document.getElementById('s1').innerHTML=ev.clientX+','+ev.clientY;
}
用法：
document.onclick=function (ev){
// console.log(ev);
ev=ev||event;
console.log(ev.offsetX,ev.clientY);
}
page兼容写法：
document.onclick=function (ev){
// console.log(ev);
ev=ev||event;
// document.documentElement.scrollTop可兼容至ie7
//如果ie7一下的游览器还想兼容的话，可以使用document.body.scrollTop
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
// alert(ev.pageY);
// ie低版本得自己去加
alert(ev.clientY+scrollTop);
//ev.clientY+scrollTop和 ev.pageY 获取出来的是一样的
console.log(ev.clientY+scrollTop==ev.pageY);
}
方块跟随鼠标移动demo
document.onmousemove=function (ev){
ev=ev||event;
oDiv.style.left=ev.clientX+'px';
oDiv.style.top=ev.clientY+'px';
};
方块跟随鼠标移动demo在线演示
键盘事件
键盘事件的种类
键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。
keydown：按下键盘时触发。（按住一个键 – down会重复触发
keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
keyup：松开键盘时触发该事件。
如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。
keydown
keypress
keydown
keypress
...（重复以上过程）
keyup
KeyboardEvent 接口概述
KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。
可以使用console.log打印出可选参数
document.onkeydown=function (ev){
console.log(ev);
}
//打印按键所在数字
document.onkeydown=function (ev){
console.log(ev.keyCode);
}
keyCode：字符串，当前按下的键，默认为空字符串。
code：字符串，表示当前按下的键的字符串形式，默认为空字符串。
location：整数，当前按下的键的位置，默认为0。
ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。
shiftKey：布尔值，是否按下 Shift 键，默认为false。
altKey：布尔值，是否按下 Alt 键，默认为false。
……
兼容情况：
================================
code 以文本的形式显示按下的键 ※只兼容chrome
================================
Code ：
下面是一些常用键的字符串形式，其他键请查文档或自行打印
数字键0 - 9：返回digital0 - digital9
字母键A - z：返回KeyA - KeyZ
功能键F1 - F12：返回 F1 - F12
方向键：返回ArrowDown、ArrowUp、ArrowLeft、ArrowRight
Alt 键：返回AltLeft或AltRight
Shift 键：返回ShiftLeft或ShiftRight
Ctrl 键：返回ControlLeft或ControlRight
================================
完全兼容的就这几个
ctrlKey/altKey/shiftKey 按键同时，组合键是否按下
keyCode 用数字表示按键
================================
keyCode ：
下面是一些常用键的数字形式，其他键请查文档或自行打印
F1 ~ F12 => 112 ~ 123
A ~ Z => 65 ~ 90
0 =>48
1 ~ 9 => 49~57
↑ → ↓ ← => 38 39 40 41
shift => 16
ctrl => 17
atl => 18
......
键盘控制方块移动demo
<style>
.box {
width: 200px;
height: 200px;
background: lightpink;
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="box"></div>
const arrowLeft=37,arrowUp=38,arrowRight=39,arrowDown=40,ctrlKey=17;
let oDiv=document.getElementsByClassName('box')[0];
const speed=5;
const speed2=20;
let right=false;
let left=false;
let up=false;
let down=false;
let ctrl=false;
document.onkeydown=function (ev){
switch (ev.keyCode){
case arrowLeft:
left=true;
break;
case arrowUp:
up=true;
break;
case arrowRight:
right=true;
break;
case arrowDown:
down=true;
break;
case ctrlKey:
// 按住ctrl后ctrl就变为true
ctrl=true;
break;
}
}
document.onkeyup=function (ev){
switch (ev.keyCode){
case arrowLeft:
left=false;
break;
case arrowUp:
up=false;
break;
case arrowRight:
right=false;
break;
case arrowDown:
down=false;
break;
case ctrlKey:
ctrl=false;
break;
}
}
setInterval(function (){
// 三目判断，如果按住了ctrl，就写入speed2的速度，反之就是speed
let s=ctrl?speed2:speed;
if (right) oDiv.style.left=oDiv.offsetLeft+s+'px';
if (left) oDiv.style.left=oDiv.offsetLeft-s+'px';
if (up) oDiv.style.top=oDiv.offsetTop-s+'px';
if (down) oDiv.style.top=oDiv.offsetTop+s+'px';
},16)
冷知识：当if语句只有一句时，花括号可以省略，并且换不换行都行
键盘控制方块移动demo在线演示