键盘、鼠标、移动端触屏事件

事件的绑定方式

1. 句柄绑定 — 写在html标签中以属性的形式存在 【onclick="function(){}"】
2. DOM 0 级绑定 — element.on+事件 =function(){}
3. DOM 2级绑定 — document.addEventListener("事件"，function(){})

键盘事件

keydown 按键事件
keycode 按键的Unicode码 ，对应键盘上的按键

//这里用的DOM 0 级绑定
document.onkeydown = function(event){
//写兼容性
    var event = event || e || arguments[0];
    if(event.keycode == 37){
      console.log("这是左移")
   }
}

鼠标事件

mousemove 鼠标移动
mousedown 鼠标按下
mouseup 鼠标松开

mouseenter 鼠标移入
mouseleave 鼠标移出
mouseover 鼠标移入
mouseout 鼠标移出

注:

• hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件；
• mouseenter、mouseleave：效果与hover相同；
• mouseover： 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件，即使添加了阻止冒泡 event.stopPropagation();return false;
• mouseout： 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件，即使添加了阻止冒泡event.stopPropagation();return false;

移动端触屏事件

touchstart 手指按下
touchend 手指松开
touchmove 手指移动

注: 触屏事件必须用DOM 2级绑定 — 监听事件绑定addEventListener()

document.addEventListener("touchstart",function(event ){
//写兼容性
    var event = event || e || arguments[0];
    //获取手指按下的坐标位置
    var x = event.touch[0].pageX
    var y = event.touch[0].pageY
})
document.addEventListener("touchend",function(event ){
//写兼容性
    var event = event || e || arguments[0];
    //获取手指抬起的坐标位置
    var x = event.changedTouch[0].pageX
    var y = event.changedTouch[0].pageY
})
// 根据两次获取的坐标位置，可以进行判断，手指滑动的方向