事件--鼠标、键盘、滚轮

一、鼠标事件：

    onclick //点击
    onmouseout //移出 
    onmouseover //移入
    onmouseenter //移入
    onmouseleave //移出
    ondblclick //双击
    oncontextmenu:鼠标右键
    onmousemove //移动
    onmousedown //按下
    onmouseup //抬起

注意：鼠标移入移出事件：（是同一个div触发的时候）
over和out会在鼠标从父级移入子级元素的时候触发
enter和leave只有在移入和移出父级和子级整体的时候才会触发

redDiv.onmouseout=function(){
    console.log("out鼠标移出")
}
redDiv.onmouseover=function(){
    console.log("over鼠标移入")
}
redDiv.onmouseenter=function(){
    console.log("enter鼠标移入")
}
redDiv.onmouseleave=function(){
    console.log("leave鼠标移出")
}
  鼠标移入父级，触发enter和over
  从父级移到子级，父级out，子级over
  鼠标移出父级和子级的整体时触发leave

二、键盘事件

onkeydown 
onkeyup
onkeypress

输入框可以添加键盘事件，只有成为焦点的时候才会触发键盘事件

三、表单事件

onchange:内容发生变化（前提是失去焦点后）
onblur:失去焦点
onfocus:获得焦点
oninput:输入框内容发生变化时触发，实时触发
onsubmit:表单提交时触发
onreset:表单重置时触发

屏幕快照 2017-10-12 下午4.45.30.png

五、获取事件对象event

    redDiv.onmousemove(ev){
       var ev =window.event||ev; //兼容
    }

四、阻止默认事件

return false;
ev.returnValue=false;
ev.preventDefault();

五、滚轮事件
谷歌/IE：onmousewheel
ev.wheelDelta ：滚动一格数值120 上正下负

火狐：DOMMouseScroll
ev.detail：滚动一格数值为1 下正上负

兼容写法:

function addMouseWheel(el,fn){
    if(navigator.userAgent.indexOf("Firefox")!=-1){
        //火狐
        el.addEventListener("DOMMouseScroll",fn,false)
    }else{
        //谷歌 IE
        el.onmousewheel=fn;
    }       
}