JavaScript学习的十五天

## HTML DOM事件

函数：由事件驱动的 可重复执行的代码

事件：允许js在HTML文档元素注册不同的事件处理程序 驱动函数/方法

### 1.鼠标事件

    <div id="wrap">
        <div class="box">onclick</div>
        <div class="box">ondblclick</div>
        <div class="box">onmousedown</div>
        <div class="box">onmouseup</div>
        <div class="box">
            <div class="min">onmouseover</div>
        </div>
        <div class="box">
            <div class="min">onmouseout</div>
        </div>
        <div class="box">
            <div class="min">onmouseenter</div>
        </div>
        <div class="box">
            <div class="min">onmouseleave</div>
        </div>
        <div class="box">onmousemove</div>
        <div class="box">onmousewheel</div>
        <div class="box">onwheel</div>
        <div class="box">oncontextmenu</div>
    </div>

var aBox = document.getElementsByClassName("box");

onclick  当用户点击某个对象是调用的事件句柄  左键单击

    aBox[0].onclick = function (event) {
        console.log("onclick事件");
        console.log(event);
    }

ondblclick  当用户双击某个对象是调用的事件句柄  左键双击

    aBox[1].ondblclick = function (event) {
        console.log("ondblclick事件");
        console.log(event);
    }

onmousedown  鼠标按钮被按下

    aBox[2].onmousedown = function (event) {
        console.log("onmousedown事件");
        console.log(event.which);
    }

onmouseup  鼠标按钮被松开

    aBox[3].onmouseup = function (event) {
        console.log("onmouseup事件");
        console.log(event);
    }

鼠标的移动事件

onmouseover  鼠标指针移入到某个元素上   进入到子元素会触发

    aBox[4].onmouseover = function (event) {
        console.log("onmouseover事件");
        console.log(event);
    }

onmouseout  鼠标指针从某个元素上移出   进入到子元素会触发

    aBox[5].onmouseout = function (event) {
        console.log("onmouseout事件");
        console.log(event);
    }

onmouseenter  鼠标指针移入到某个元素上

onmouseover唯一的区别是 onmouseenter 事件不支持冒泡 ,在子元素上也会触发(p 和 span)。

    aBox[6].onmouseenter = function (event) {
        console.log("onmouseenter事件");
        console.log(event);
    }

onmouseleave  鼠标指针从某个元素上移出  

    aBox[7].onmouseleave = function (event) {
        console.log("onmouseleave事件");
        console.log(event);
    }

onmousemove  鼠标指针在某个元素上移动

    aBox[8].onmousemove = function (event) {
        console.log("onmousemove事件");
        console.log(event);
    }

onmousewheel  鼠标滚轮事件   已废弃  使用onwheel替换

    aBox[9].onmousewheel = function (event) {
        console.log("onmousewheel事件");
        console.log(event);
    }

onwheel  鼠标滚轮事件

    aBox[10].onwheel = function (event) {
        console.log("onwheel事件");
        console.log(event);
    }

oncontextmenu  当用户点击鼠标右键打开上下文菜单时触发

    aBox[11].oncontextmenu = function (event) {
        console.log("oncontextmenu事件");
        console.log(event);
    }