史上最详细的DOM事件之鼠标事件

<h1>01DOM的鼠标事件</h1><divid="wrap"><divclass="box">onclick</div><divclass="box">oncontextmenu</div><divclass="box">ondblclick</div><divclass="box">onmousedown</div><divclass="box">onmouseup</div><divclass="box">onmousemove</div><divclass="box">onmouseenter
<p></p></div><divclass="box">onmouseleave
<p></p></div><divclass="box">onmouseover
<p></p></div><divclass="box">onmouseout
<p></p></div><divclass="box">onmousewheel</div><divclass="box">onmousewheel</div>

.box{
            width: 500px;
            height: 100px;
            margin: 10px auto;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        .box:nth-of-type(odd){
            background: skyblue;
        }
        .box:nth-of-type(even){
            background: hotpink;
        }
        p{
            width: 200px;
            height: 50px;
            background: yellow;
            margin: 0 auto;
        }

var aBox=document.getElementsByClassName("box");
    // var aBox2=document.querySelectorAll(".box");
    // var oWrap=document.getElementById("wrap");
    // console.log(aBox);
    // console.log(aBox2);
    // oWrap.removeChild(aBox2[0]);
    // console.log(aBox);
    // console.log(aBox2);
    // onclick  当用户点击某个对象时调用的事件句柄。
    aBox[0].onclick=function(event){
        alert("onclick事件");
        console.log(event);
    }
    // oncontextmenu  在用户点击鼠标右键打开上下文菜单时触发  
    aBox[1].oncontextmenu=function(event){
        alert("oncontextmenu事件");
        console.log(event);
    }
    // ondblclick 当用户双击某个对象时调用的事件句柄。 double
    aBox[2].ondblclick=function(event){
        alert("ondblclick事件");
        console.log(event);
    }

// onmousedown  鼠标按钮被按下。   左中右键都会触发
    aBox[3].onmousedown=function(event){
        alert("onmousedown事件");
        console.log(event);
    }
    // onmouseup  鼠标按键被松开。
    aBox[4].onmouseup=function(event){
        alert("onmouseup事件");
        console.log(event);
    }
    var num=0;
    // onmousemove  鼠标被移动。    
    aBox[5].onmousemove=function(event){
        num++;
        // console.log("onmousemove事件",num);
        console.log(event);
    }
    var num1=0,num2=0,num3=0,num4=0;
    // onmouseenter 当鼠标指针移动到元素上时触发。 
    aBox[6].onmouseenter=function(event){
        num1++;
        console.log("onmouseenter事件",num1);
        // console.log(event);
    }
    // onmouseleave 当鼠标指针移出元素时触发。
    aBox[7].onmouseleave=function(event){
        num2++;
        console.log("onmouseleave事件",num2);
        // console.log(event);
    }
    // onmouseover  鼠标移到某元素之上。
    aBox[8].onmouseover=function(event){
        num3++;
        console.log("onmouseover事件",num3);
        // console.log(event);
    } 
    // onmouseout 鼠标从某元素移开。 
    aBox[9].onmouseout=function(event){
        num4++;
        console.log("onmouseout事件",num4);
        // console.log(event);
    }

// onmousewheel    鼠标滚轮事件   已废弃
    var num5=0;
    aBox[10].onmousewheel=function(event){
        num5++;
        console.log("onmousewheel事件",num5);
        // console.log(event);
    }
    // onwheel  该事件在鼠标滚轮在元素上下滚动时触发
    var num6=0;
    aBox[11].onwheel=function(event){
        num6++;
        console.log("onwheel事件",num6);
        // console.log(event);
    }